Question

171

Swiper Slider Mouse Scroll And Looping Content

rated 0 times [ 175] [ 4] / answers: 1 / hits: 23443 / 5 Years ago, thu, march 21, 2019, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byrondonavanc

Add To Favorites

Follow

Total Points: 675

Total Questions: 107

Total Answers: 105

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

answered 5 Years ago collinisaaka · Accepted Answer

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