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:

I appreciate any help

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

• javascript
• jquery
• css
• slideshow
• swiper.js

• loop: true, will work, check in your codepen. you forgot it in you running code. – Devsi Odedra Commented Mar 21, 2019 at 11:03
• Thank you very much for your answer, I also tried it with loop:true but its also not working while scrolling the slider. Any ideas? – Dennis Commented Mar 21, 2019 at 11:07

1 Answer 1

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./swiper-api#parameters.

• Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs./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