Swiper: VirtualTranslate and loop not working together

[michaelWoe]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 4.5.0
• Platform/Target and Browser Versions: Windows, CHROME.
• Live Link or JSFiddle/Codepen or website with issue: https://jsfiddle.net/u4vqyt7o/

What you did

Initialized autoplay-example with following JS:

var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  centeredSlides: true,
  virtualTranslate: true,
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
    waitForTransition: false,
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

Expected Behavior

Slideshow working correctly (pagination counting correctly and slide classes updating).

Actual Behavior

• Slideshow get's stuck on 2nd slide.
• Swiping working if stuck but navigation not.
• It also is not working without autoplay.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pmkhoa]

Had the same issue when using virtualTranslate and loop both set to true. Then the navigation next/prev will not working. Only the swipe works.

[romanran]

Same problem here.

[Djules]

I found out that reseting swiper internal animating flag on slideChangeTransitionStart event make it works again.

var swiper = new Swiper('.swiper-container', {
  …
});

swiper.on('slideChangeTransitionStart', function() {
  setTimeout(function() {
    swiper.animating = false;
  }, 0);
});

[godness84]

@Djules this inside setTimeout refers to window instead of the swiper instance. I replaced with swiper.animating = false and it works.

[Djules]

@godness84 whoops my bad! I edited my previous comment. Glad it works!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

[herrschuessler]

@nolimits4web This issue still persists in Swiper 6. Is it possible to re-open this issue?

[vltansky]

@herrschuessler did you try the following workaround?

I found out that reseting swiper internal animating flag on slideChangeTransitionStart event make it works again.

var swiper = new Swiper('.swiper-container', {
  …
});

swiper.on('slideChangeTransitionStart', function() {
  setTimeout(function() {
    swiper.animating = false;
  }, 0);
});

[herrschuessler]

@vltansky Yes, and I can confirm that it works!