Pagination issue when slides are looped and slidesPerView is greater than 1

[toss911]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-react-infinite-loop-forked-b3172c?file=/src/App.jsx

Bug description

Last pagination bullet fails to navigate to the last view when slides are looped and slidesPerView is greater than 1.

Expected Behavior

When the last bullet point is clicked, Slide 9 and 1 are displayed.

Actual Behavior

When the last bullet point is clicked, Slide 8 and 9 are displayed.

Swiper version

9.0.0

Platform/Target and Browser Versions

Windows, Chrome Version 109.0.5414.120

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

[tanyibate]

I am facing a similar issue, I am currently trying to create a slider by setting the slidesperview to a decimal value of 1.3, so that it shows a part of the previous and next slide. It functions correctly with slidesperview: 1.3 and centeredslides which shows a part of the nextslide on page 1, then a part of the next and previous slide on page if there are 3 or more slides available. But with the addition of the setting of loop the middle slide will be the 3rd slide and when toggled it would move to the first slide and then 3rd slide back and forth

[kyrylo-soulandwolf]

Just a note here (if this helps to identify the issue): when you click on the last pagination bullet and it fails to bring you to slide 9, using "next" navigation arrow fixes the last bullet point and shifts this bug to bullet number 2. Every time you use navigation the bug moves to n + 2 bullet point.

[steve3d]

this also happens when I try to use swiper/elements

<swiper-container class="flex-grow-1 w-100" speed="800" slides-per-view="1" parallax="true" loop="true"
                  autoplay-delay="3000" autoplay-disable-on-interaction="false"
                  navigation="true" pagination="true">
      <swiper-slide *ngFor="let b of items"   class="h-100 align-items-end d-flex justify-content-center position-relative">
             ......
      </swiper-slide>
</swiper-container>

the pagination bullets will out of sync when slides loop.

[steve3d]

I might find the problem here, this pagination's problem will happen if slide don't have data-swiper-slide-index, which will be set by loopCreate, so this means, the loopCreate might not be called, when slides change, or update.

I'm using angular, because swiper removed angular binding, I've created my own version of component. and there are mostly 2 situations:

• slides already exists when init swiper
• slides will be ready after the swiper init, this is the slides data are coming from remote data.

So I manually call the swiper.loopCreate() after the slides are changed, then problem gone.