Собственная функция навигации JavaScript Swiper не работает

Я использую swiper, чтобы сделать слайдер на своем сайте. К сожалению, в Chrome не работает навигация. Кнопки появляются, но ничего не делают.

Это мой код:

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>



  <script src="js/swiper/swiper.min.js"></script>

  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 3,
      spaceBetween: 5,
      loop: true,
      centeredSlides: true,
    });
  </script>

Я надеюсь, что кто-то может мне помочь, так как я не мог найти никакой информации по этой теме.


javascript swiper
person philippblack    schedule 24.04.2018    source источник
comment
Что говорит ваша консоль?   -  person rmlan    schedule 24.04.2018
comment
Консоль ничего не говорит..   -  person philippblack    schedule 25.04.2018

Ответы (4)


arrow_upward
12
arrow_downward

У меня была точно такая же проблема, и я не мог понять.

Этот вопрос помог мне понять, что проблема существовала до тех пор, пока окна были изменены.

Добавление:

observer: true, 
observeParents: true

Чтобы конфигурация Swiper решила проблему для меня

person Tonio    schedule 03.10.2018

arrow_upward
12
arrow_downward

Попробуйте импортировать Navigation из библиотеки Swiper. А потом Swiper.use()

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

const swiper = new Swiper(...);
person ecairol    schedule 27.09.2020
comment
Было бы неплохо, если бы вы объяснили свой ответ или хотя бы предоставили полный пример кода. - person Quality Catalyst; 27.09.2020

arrow_upward
6
arrow_downward

У меня была эта проблема при работе с Next.JS,React. Я потратил почти день, выясняя, что не так. Пока я не обнаружил, что должен импортировать библиотеку, используя SwiperCore. документация довольно прямолинейна.

import SwiperCore, { Navigation } from 'swiper';
SwiperCore.use([Navigation]);

Так что, по сути, здесь нет ничего особенного, просто библиотека разделяет свой код на более мелкие части, поэтому в ваш комплект будут включены только те вещи, которые вам действительно нужны. (Хотя встряска деревьев уже сейчас в моде).

Поэтому я добавил это в свой _app.tsx, и родная функция будет включена во все swiper с помощью навигации.

person Rich    schedule 09.10.2020

arrow_upward
5
arrow_downward

Как сказано в документации.

По умолчанию Swiper экспортирует только основную версию без дополнительных модулей (таких как Навигация, Пагинация и т. д.). Поэтому вам нужно импортировать и настроить их тоже:

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
person Fred K    schedule 01.12.2020