Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
5 of 6 tasks
Dalton123 opened this issue Mar 20, 2024 Discussed in #7400 · 0 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests
Closed
5 of 6 tasks

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

Dalton123 opened this issue Mar 20, 2024 Discussed in #7400 · 0 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests

Comments

@Dalton123
Copy link

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment