Pagination bug in loop mode

[SSPPLL]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/embed/festive-browser-f1ebos?fontsize=14&hidenavigation=1&theme=dark

Bug description

Hey! Here is a bug with pagination in loop mode, when slidesPerView: "auto".
If you click the last bullet and then the third one, which index is 2, swiper don't make loopFix correctly and slide to index 1.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

9.1.0

Platform/Target and Browser Versions

Chrome 110.0.5481.178

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

[drdah123]

just delete margin-right: 30px; from .swiper-slide and every thing will be ok

[SSPPLL]

just delete margin-right: 30px; from .swiper-slide and every thing will be ok

Even if you delete margin+width from css for slide and set slidesPerView as 2, you will get the same bug. Just try it yourself.

[dominikbysko]

I ran into the same issue today.

I am developing a website for a client, it's currently deployed on Netlify, you can check it up:
https://instalbud.netlify.app/

To replicate the bug:
as you see the first carousel, just try to click between first and second, you will notice that when you go from second to first, the slide content changes correctly, however, the active dot stays where it was.
The issue goes away if I remove the loop prop.

I am using React, here's my carousel setup:

        <Swiper
          className="main-swiper"
          modules={[Navigation, Pagination, Autoplay]}
          slidesPerView={1}
          navigation
          pagination={{
            clickable: true,
          }}
          allowTouchMove={isBelowMd}
          autoplay={{
            delay: 8000,
            disableOnInteraction: false,
          }}
          loop
        >

Also, if you scroll down, there is a Testimonials section where I am also using Swiper to display testimonials in a carousel. Here the issue seems to be even broader, I guess it's due to slidesPerView={2} . You can play around with it, but it doesn't update the bullets correctly going forward as well as backward. As long as an issue with carousel no. 1 is limited to just going from slide 2 to slide 1, here I can't see any obvious pattern, it all messes up 😞
The second carousel setup is the same as the first one, just the slidesPerView prop is 2 instead of 1.

[111398]

I have same bug.
data-swiper-slide-index props which is dynamically changing bugs pagination.
https://www.freedominteriors.ru/ - you can see it on top banners

            <Swiper
              slidesPerView={1}
              // centeredSlides={true}
              loop={true}
              autoplay={{
                delay: 3500,
                disableOnInteraction: false,
              }}
              mousewheel={{
                forceToAxis: true,
              }}
              pagination={{
                clickable: true,
              }}
              navigation={true}
              modules={[Autoplay, Pagination, Navigation, Mousewheel]}
              className="mySwiper"
              speed={1000}  
            >

This is my Swiper component setup.

[SaboyaDev]

I also have the same issue with pagination as long as loop is true it brakes.

[jalonenbrothers]

Although this is closed, I'm guessing I have the same issue - loop and slidesperview set to auto / more than one:
https://earth-turtle.com/demos/swiper.php

1. open page
2. click the second pagination bullet: carousel moves wrong way, no slide on the left (only two slides showing)
3. click the first pagination bullet: no slide on the left, active pagination bullet does not update
4. click the fifth pagination bullet for similar bug.
5. keep clicking for more similar pagination issues.

In this demo the navigation appears to work, but I had another slider with same setup where navigation and mouse drag kept skipping a few slides, and navigation also wasn't advancing the bullets in correct order.

I have centeredSlides; true, which seems to be part of the issue, but even with centeredSlides commented out, the pagination bullets break after a while of clicking.

The pagination does not seem to know if it should go left or right when clicking the pagination bullet - sometimes from slide 5, instead of going one step right to slide 6, it'll go multiple steps left to slide 6, and leaves out the left-hand slide completely.

using Swiper 9.4.1

[LakshanKarunathilake]

I also found the same error when enabling the loop. I am attaching the sandbox example try to click the fourth bullet

https://codesandbox.io/p/sandbox/8kx0sg?file=%2Fsrc%2FApp.jsx