Swiper Infinite loop scroll jumping

[deividisss]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/yl6ddq

Bug description

As an example, I will use the Slider Infinite Loop demo with 9 slides: https://swiperjs.com/demos/200-infinite-loop/core.
When you press the back button arrow to go from the first slide to the last slide and then press pagination dot to go from slide 9 to slide 8, you will notice a crazy jump through multiple slides, and it keeps happening when you switch between slides 8 and 9 using pagination dots.

Expected Behavior

Slider should scroll one slide

Actual Behavior

It scrolls multiple slides
https://github.com/nolimits4web/swiper/assets/48391144/0392a2c5-9847-44dd-9076-e4aed34486f5

Swiper version

v11.0.5

Platform/Target and Browser Versions

Windows /Linux Version 120.0.6099.111 (Official Build) (64-bit)

Validations

• Follow our Code of Conduct
• Read 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

[hajirasyafi]

Yeah I can see it

[hamzaejaz787]

I have same issue, only happens when using navigation to go from last to first then i clicking on any pagination in between and it jumps like crazy. Any help would be appriciated

[rengarcia]

Same here, I have the similar error :(

[and-t]

I wrote a quick fix to this issue, after dealing with it on production. For reference, my swiper configuration:

const swiper = new Swiper(".swiper", {
    modules: [Navigation, Pagination],
    slidesPerView: "auto",
    centeredSlides: true,
    spaceBetween: 15,
    grabCursor: true,
    loop: true,
    slidesPerGroup: 1,
    loopFillGroupWithBlank: false,
    loopAdditionalSlides: 2,
    lazy: {
        loadPrevNext: true,
        loadPrevNextAmount: 2,
    },
    keyboard: {
        enabled: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

I really wanted a centeredSlides: true swiper with slidesPerView: "auto", but this meant that going backwards past index: 0 would generate a weird behavior (there would be a full loop, or jumping a few slides / indexes). Taking the slidesPerView: "auto" fixed the backwards jump, but now there was an issue going forward. So I wrote the following fix:

1. First, you need a global (or scoped, depending on your code) variable:

let currentIndex = 0;

2. Then, we need two custom functions for each swiper navigation button:

const prevButton = document.querySelector(".swiper-button-prev");
const nextButton = document.querySelector(".swiper-button-next");

prevButton.addEventListener("click", () => {
    if (currentIndex === 0) {
        currentIndex = swiper.slides.length - 1;
    } else {
        currentIndex--;
    }
    swiper.slideToLoop(currentIndex);
    console.log(currentIndex);
});

nextButton.addEventListener("click", () => {
    currentIndex = swiper.realIndex;
    console.log(currentIndex);
});

This will eliminate the issue of the realIndex jumping like crazy when going backwards. If your issue appears when going forward on the slide, swap the functions.

[shalevc1098]

I wrote a quick fix to this issue, after dealing with it on production. For reference, my swiper configuration:

const swiper = new Swiper(".swiper", {
    modules: [Navigation, Pagination],
    slidesPerView: "auto",
    centeredSlides: true,
    spaceBetween: 15,
    grabCursor: true,
    loop: true,
    slidesPerGroup: 1,
    loopFillGroupWithBlank: false,
    loopAdditionalSlides: 2,
    lazy: {
        loadPrevNext: true,
        loadPrevNextAmount: 2,
    },
    keyboard: {
        enabled: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

I really wanted a centeredSlides: true swiper with slidesPerView: "auto", but this meant that going backwards past index: 0 would generate a weird behavior (there would be a full loop, or jumping a few slides / indexes). Taking the slidesPerView: "auto" fixed the backwards jump, but now there was an issue going forward. So I wrote the following fix:

1. First, you need a global (or scoped, depending on your code) variable:

let currentIndex = 0;

2. Then, we need two custom functions for each swiper navigation button:

const prevButton = document.querySelector(".swiper-button-prev");
const nextButton = document.querySelector(".swiper-button-next");

prevButton.addEventListener("click", () => {
    if (currentIndex === 0) {
        currentIndex = swiper.slides.length - 1;
    } else {
        currentIndex--;
    }
    swiper.slideToLoop(currentIndex);
    console.log(currentIndex);
});

nextButton.addEventListener("click", () => {
    currentIndex = swiper.realIndex;
    console.log(currentIndex);
});

This will eliminate the issue of the realIndex jumping like crazy when going backwards. If your issue appears when going forward on the slide, swap the functions.

how can i fix it with react?

[joey-ma]

still an issue today. Tried to implement this with solution proposed in thread @and-t, but couldn't produce the desired fix :( (I'm also using React)