Swiper Slider Mouse Прокрутка и цикл содержимого - PullRequest
Новая
       45

Swiper Slider Mouse Прокрутка и цикл содержимого

0 голосов
/ 21 марта 2019

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

Моя настройка ползунка выглядит так: 

var swiper = new Swiper(".swiper-container", {
  direction: "horizontal",
  mousewheelControl: true,
  slidesPerView: "auto",
  freeMode: true,
  followFinger: true,
  loop: true
});

Codepen: https://codepen.io/Dennisade/pen/ZPygbr

Я ценю любую помощь

1 Ответ

1 голос
/ 17 мая 2019

Начиная с версии Swiper 4.5.0, в вашем коде есть три вещи, которые вызывают ошибки:

  • Во-первых, вы добавили swiper-wrapper div вокруг каждого слайда.Вам нужен только один swiper-wrapper div, который оборачивает все ваши слайды.

  • Во-вторых, когда вы устанавливаете slidesPerView: 'auto' вместе с loop: true, вам нужно указать общее количество цикловслайды и добавьте его в параметр loopedSlides.Оформить документ в Parameters> slidesPerView: https://idangero.us/swiper/api/#parameters.

  • Последнее, параметр mousewheelControl больше не используется, вам нужен параметр mousewheel (https://idangero.us/swiper/api/#mousewheel) вот так: 

mousewheel: {
  releaseOnEdges: true,
},

В этом случае вы также можете сбросить direction: "horizontal" и followFinger: true.

Таким образом, решение: 

var swiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  freeMode: true,
  loop: true,
  loopedSlides: 8 // according to the codepen
  mousewheel: {
    releaseOnEdges: true,
  },
});

Оформить заказ на коде я разветвил, что работает: https://codepen.io/olig/pen/rgmPyb

...