Pagination issue with loop, slidesPerGroup, slidesPerView

[beebmx]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-slides-per-view-forked-hhfxgt

Bug description

The pagination works randomly with loop, slidesPerGroup and slidesPerView. This issue appears when is not exactly the number of elements in every group, and in the end, the paginator can not calculate the right position of the current page.

To reproduces in the link just go at the last dot of the pagination and it won't set the last page, but then if click on the first page, the random paginations appears, just trying to go last pages and first page.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

9.1.0

Platform/Target and Browser Versions

Safari, Chrome, Firefox

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] 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

[james0r]

I don't know if this is the same issue but maybe. I confirmed that the OP of this https://stackoverflow.com/questions/75450242/swiper-js-loop-when-slidesperview-is-bigger-than-half-of-the-amount-of-slides is correct about version 9. I reverted to version 8 and it works fine.

[ChiaraLyn]

Hi everyone, I'm migrating from Swiper version 8.1.4 to version 9.1.1 and I'm facing the same issue. I've tried to reproduce it here: (Bootstrap 5 and Swiper only as asset).

Codepen Issue

It seems that there is a problem with the loop. It vibrates when using the grab and pagination lost focus. I was forced to go back to the version 8.1.4 because the same behavior occurs with all versions 9. I wait to hear some god news...!

[lukecharle]

Think this may be similar to what I've just posted?

6504

[nhocleopro]

Same issue

[benwallis]

Think this is the same issue?

https://github.com/nolimits4web/swiper/issues/6518

[nhocleopro]

Any update?

[everythinginjs]

any improvements ?

[catsmeatman]

In v9.4.0 too

[jalonenbrothers]

Just posted in a closed issue, so maybe worth posting here - in 9.4.1 as well:

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

[MrSeaWave]

I have the same issue 😢 in v9.4.1, see https://github.com/nolimits4web/swiper/issues/6768

https://user-images.githubusercontent.com/21967852/246788704-1f668520-6e4f-4435-8f0a-d891ec1acbb0.mov

[mskrzypek]

Same issue here. In v9.2.4, but also after upgrade to v9.4.1. Downgrade to version 8 solves the problem.

[kevinvugts]

@nolimits4web when are you planning to fix this?

I can definitely confirm that this is a bug in v9+. Like everyone else v8 works as expected!

[DibyodyutiMondal]

I faced this problem myself. I use navigation and pagination Pagination was working fine by default. But if I enabled 'loop', then pagination would not work at all. Navigation buttons worked fine. But, if I clicked any pagination button, it would not work. Clicking on pagination button would also break the autoplay loop.

The solution for me was to add an attribute called data-swiper-slide-index to each swiper-slide. This is basically a zero-based index, and it is used by swiperjs internally to compute which slide is supposed to be active in case of loop.

At least in my setup, this attribute is not added by default by the library. I use swiper elements with angular. My swiper js version is 10. Once I added the attribute with correct values, it was working perfectly.

EDIT: If this is expected behaviour, and developers are supposed to be specifying the index, perhaps an indication of the same in the docs is necessary (unless I have missed it)

[benwallis]

Loop mode rarely works properly if slidesPerView is more than 1

[nolimits4web]

Swiper v11 comes with reworked and update loop mode. If your issue is replicated with v11, create a new one