[Swiper - Controller] The swipers don't keep up with each other when looping

[lukashanssondn]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-controller-demo-tmmd9j

Bug description

I have two swipers and the second controls the first. The first swiper is only 90% of the width so you can have a sneak preview of the next slide. The second slide is 100%

This causes the sliders to get out of synk round slide 9 or when looping.

This only occur when looping is on

Expected Behavior

The swiper should be synchronized

Actual Behavior

The swipers get out of synk

Swiper version

11.0.3

Platform/Target and Browser Versions

macOS, Chrome, Safari

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?

• [x] I'm willing to open a PR

[andrewwise]

I have the same issue.

Another codesanbox here: https://codesandbox.io/p/sandbox/swiper-centered-auto-control-qy5m8h

I believe the issue is the combination of loop and having sliders with different slidesPerView. Using centeredSlides seems to cause the issue also.

[fidlip]

I am also facing this issue. Problem is not really connected with looping. If I modify slightly demo from reproduction link and change slidesPerView to 3, it shows even stranger behavior even wihout looping. codeSandbox Is there any will to fix this?

[dsosborn]

Same issue... furthermore, I tried replacing the dual controllers approach with using slideToLoop with runCallbacks set to false inside each slideShow's onSlideChange handler. That produced an infinite loop, even though I thought runCallbacks:false is supposed to prevent that from happening.