Swiper Cards effect and loop: true not working together

[clselin]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-effect-cards-forked-f6k9q2?workspaceId=ws_PGfRXB72v1xBgaKYFoJD1E

Bug description

When I create a slider using the effect: "cards" and loop: true, the slider will sometimes skip a slide (eg going from Slide 1 to Slide 3 instead of Slide 2) when progressing forwards through the slider.

(If I revert my project back to version 11.1.15 it works fine.)

Expected Behavior

When I create a slider with loop:true and the card effect, the slides should progress through in linear order without skipping a slide. Clicking 'next' from slide 1 should result in a smooth transition to slide 2.

Actual Behavior

For some of the transitions, the slide seems to change instantly to the next slide then play an animation and go to the next slide after that.

Eg, I am on slide 1, I click the next arrow, the slide seems to instantly change to slide 2 then animate to slide 3.

The effect is like the slide I want is instantly skipped.

Swiper version

11.2.4

Platform/Target and Browser Versions

macOS chrome 133.0.6943.127

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

[nolimits4web]

Demo link you have posted is not working

[github-actions]

Hello @clselin. Please provide a online reproduction by codesandbox or a minimal GitHub repository. You can fork one of our demos in codesandbox to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

[clselin]

Sorry about that - the link is fixed, I had accidentally set it to private.

[adriennwhite]

I had the same problem and my case (#7895) has been closed without a real fix, just saying I need more slides and extra settings, which isn't a real solution. Something went wrong with the looping cards since that update and hasn't been fixed yet.

[clselin]

@adriennwhite that sounds exactly like my issue - I simplified things for the minimal demo, but the actual use case for this in production is just like yours, two sliders which are connected. This issue causes them to go out of sync, on top the basic issue I reported above.

I don't understand the recommendation to have more than 8 slides - in my design it's pretty important that there are less than 8 slides, so if that's the only solution, it won't work for me. For the moment, I've reverted to an older version of Swiper. I hope this can be fixed soon.