iDangero.us Ошибка цикла Swiper с предыдущей навигацией - PullRequest
Новая
       11

iDangero.us Ошибка цикла Swiper с предыдущей навигацией

0 голосов
/ 21 мая 2018

При перемещении назад по циклу с помощью «предыдущей» навигационной кнопки слайды, кажется, перепрыгивают с последнего на первое.Кажется, что проблема возникает на всех платформах.

Движение вперед с использованием навигации работает, как и ожидалось, и перетаскивание работает, как и ожидалось.

Я сделал скрипку, основанную на демонстрации «Центрированные слайды + Автоматические слайды на просмотр» на веб-сайте Swiper, добавив только навигационный HTML

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

ипараметры

loop: true, loopedSlides: 10, roundLengths: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },

JSFiddle здесь: https://jsfiddle.net/MatraSimca/L063jo3x/17/

На производственном сайте, над которым я работаю, я использую слайды фиксированной ширины, и проблема только кажетсявозникает при добавлении

roundLengths: true,

При использовании ширины в процентах в демонстрационной скрипте проблема возникает с параметром roundLengths или без него.Любые указатели оценили ...

1 Ответ

0 голосов
/ 30 ноября 2018
Функциональность цикла

позволяет дублировать только узлы DOM, а это означает, что к дублированным слайдам цикла не добавляется и их код JS, а только результат визуализации.

Я потратил 2 дня, пытаясь выяснить это.Таким образом, используя оригинальные методы и события Swiper, я пришел к функции полубесконечного цикла:

добавьте следующее в конфигурацию вашего swiper'а 

loop: true,
loopedSlides: 1,
on: {
   slideChange: function () {
      let lastVisibleItem = this.realIndex + this.params.slidesPerView
      let slidesLength = this.slides.length - 2
      let lastVisibleIndex = this.realIndex + this.params.slidesPerView
      // if swiper reaches the end of displayed items, goToNext redirects swiper to the start
      if (lastVisibleItem > slidesLength) {
         this.slideTo(1)
      }
      // if swiper wants to go before the first item, then forward swiper to the last item
      if (lastVisibleIndex >= this.slides.length) {
         this.slideTo((slidesLength - this.params.slidesPerView) + 1)
      }
   }
}
...