iDangero.us Swiper loop bug with previous navigation

Question

When moving back through the loop using the "previous" navigation button the slides seem to jump from last to first. Issue seems to happen on all platforms.

Moving forward using navigation works as expected, and dragging works as expected.

I have done a fiddle based off the "Centered Slides + Auto Slides Per View" demo on the Swiper website, adding only the navigation html

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

and the options

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

JSFiddle here: https://jsfiddle.net/MatraSimca/L063jo3x/17/

In the production site I'm working on I'm using fixed width slides and the issue only seems to occur when adding

roundLengths: true,

With the percentage based widths in the demo fiddle the issue occurs with or without the roundLengths option. Any pointers appreciated...

Answer 1

loop functionality is duplicating only DOM nodes, meaning that your duplicated slides for the loop don't have their JS code appended as well, only the rendered result.

I spent 2 days trying to figure this out, so by using the original Swiper's methods and events, I came to a semi-infinite-loop feature:

add the following to your swiper's config

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)
      }
   }
}