#javascript #swiper
Вопрос:
Я включил swiper для страницы, которую я создаю, и у меня есть для нее следующие настройки:
const swiper3 = new Swiper('.ingredients-swiper', {
grabCursor: true,
direction: 'horizontal',
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
Это в основном настройки по умолчанию, которые я скопировал/вставил со страницы «Начало работы» Swiper.
Проблема в том, что элементы управления разбиением на страницы и стрелки нигде не найдены.
Стрелки есть display: none
, и разбивка на страницы установлена снизу, но в нижней части экрана, а не в нижней части слайдов.
Предварительный просмотр в реальном времени можно посмотреть здесь:
https://www.bangcookies.com/pages/ingredients?предварительный просмотр_теме_ид=120521556066
Я следовал структуре, описанной в документации:
<div class="ingredients-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
...restofslides...
</div>
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
Комментарии:
1. Когда я проверил элемент на демонстрационной странице, похоже, что этот класс a:пустой, статья:пустая, div:пустая, dl:пустая, h1:пустая, h2:пустая, h3:пустая, h4:пустая, h5:пустая, h6:пустая, p:пустая, раздел:пустой, ul:пустой { /* дисплей: нет; */ } Когда я отключил его, появились кнопки. На самом деле я ничего не знаю о shopify, но css предназначен для их сокрытия.
Ответ №1:
Я мельком взглянул на ваш пример. Сайт выглядит очень красиво. Когда я настрою ваши стрелки от display:none
к display:inline block
вашим стрелкам, теперь появятся ваши стрелки.
Затем необходимо скорректировать ваше абсолютное положение. В .swiper-button-next, .swiper-button-prev { }
Снимите top:50%
, и ваши стрелки будут отображаться внизу или настраиваться по мере необходимости