CODEWITHSUNDEEP
javascriptjquerycssslideshowswiper.js
Dennis
Dennis

Reputation: 147

Swiper Slider Mouse Scroll And Looping Content

I am using the swiper slider to horizontally scroll trough my slideshow. I want that my content is looping, but for any reasons its only repeating once and than it stops.

My swiper slider setup looks like this:

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

I appreciate any help

Upvotes: 0

Views: 34058

Answers (1)

Olivier
Olivier

Reputation: 175

As of Swiper version 4.5.0, there are three things that cause errors in your code :

  • First thing, you added a swiper-wrapper div around every slide. You only need one swiper-wrapper div that wraps all your slides.

  • Second thing, when you set slidesPerView: 'auto' along with loop: true, you need to provide the total number of looped slides and add it in the loopedSlides parameter. Checkout the doc in Parameters > slidesPerView : https://swiperjs.com/swiper-api#parameters.

  • Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs.com/swiper-api#mousewheel-control) like so :

mousewheel: {
  releaseOnEdges: true,
},

You can also drop direction: "horizontal" and followFinger: true in this case.

So the solution is :

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

Checkout your codepen I forked that works : https://codepen.io/olig/pen/rgmPyb

Upvotes: 5

Related Questions