Description
Check that this is really a bug
- I confirm
Reproduction link
https://codesandbox.io/p/sandbox/swiper-infinite-loop-forked-3ckqtm
Bug description
When using a swiper config like
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
loop: true,
centeredSlides: true,
slidesPerView: 1,
loopAddBlankSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
speed: 1000,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
with the options "loop" and "centeredSlides" and i click the bullets in the following order: 3. bullet => last bullet, there is no smooth transition from my current slide (Slide 3) to the target slide (Slide 6). Instead there is a jump to the first slide (Slide 1) and a transition to the last slide (Slide 6):
swiper_jump.webm
In the swiper code the slideToLoop
function is calling the function loopFix
under specific conditions (which are fulfilled in the described behaviour) and this seems to be causing the issue:
if (needLoopFix) {
const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
swiper.loopFix({
direction,
slideTo: true,
activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
slideRealIndex: direction === 'next' ? swiper.realIndex : undefined
});
}
I know that there exists already a similar issue: #7270. But the described behaviour there is partially about the pagination buttons which are not relevant for this issue.
Note: Using swiper v10 in the sandbox, the jumping does not happen
Expected Behavior
Smooth transition to from the current slide to the target slide (clicking the bullets in the described order)
Actual Behavior
No Smooth transition to from the current slide to the target slide. Instead there is a jump (clicking the bullets in the described order)
Swiper version
11.2.1
Platform/Target and Browser Versions
macOS, Chrome
Validations
- Follow our Code of ConductRead the docs.Check that there isn't already an issue that request the same feature to avoid creating a duplicate.Make sure this is a Swiper issue and not a framework-specific issue
Would you like to open a PR for this bug?
- I'm willing to open a PR
Activity