setProgress Breaks next/prev and Keyboard Navigation if loop set to true

[Dalton123]

Discussed in #7400

^{Originally posted by Dalton123 March 20, 2024}

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/setprogress-test-zc66lf?file=%2Findex.html%3A90%2C48

Bug description

I'm using Swiper in a React project to create a carousel with loop and keyboard navigation enabled. The carousel is supposed to loop infinitely, and users should be able to navigate through slides using the keyboard or the navigation buttons. Additionally, I've implemented custom scroll-based navigation that adjusts the Swiper progress as you scroll down the page.

However I noticed that my buttons weren't working like they should. I've eventually narrowed it down to that after triggering the scroll code that updates Swiper's progress using setProgress, both the looping functionality and keyboard navigation stop working. Interestingly, dragging the carousel with a mouse or touch to navigate still works as expected.

In the demo i've just created a stripped down version that loops and you can update the progress with the button to see how it breaks the looping and keyboard navigation.

Expected Behavior

You should be able to update the progress with setProgress, and still then be able to loop, use navigation buttons and keyboard navigation.

Actual Behavior

If you update the progress manually with setProgress, it breaks keyboard navigation, buttons and loop.

Steps to Reproduce / Demo:

• Step 1: Navigate to [demo link].
• Step 2: Use the button to update progress.
• Step 3: Try navigating with keyboard or navigation arrows.

You can get the buttons, loop and navigation arrows working again if you grab the carousel and move with your mouse.
But if you update the progress with setProgress, it breaks again.

If anyone has any idea how I could achieve the progress through the carousel on browser scroll in a different way, that would still allow for keyboard and button navigation without breaking the loop, I would really appreciate that?

Swiper version

^11.2.0

Platform/Target and Browser Versions

macOS, Windows, iOS, Android

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