Блог

Главная - Вопросы по программированию - Стрелки прокрутки не видны, и разбивка на страницы снимается с нижней части страницы (не с нижней части слайдов).

Стрелки прокрутки не видны, и разбивка на страницы снимается с нижней части страницы (не с нижней части слайдов).

#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% , и ваши стрелки будут отображаться внизу или настраиваться по мере необходимости

Метки: ,