-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
[Carousel] programmatic slide control not smooth #5361
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
Comments
This is expected if you are interrupting the current transition that is in progress. This also happens with the built in carousel controls. I would also advise placing the next/previous controls outside of the carousel. |
Internally the carousel uses the same next, prev, and setSlide methods. |
I forgot to mention I had set the The transition jumps occur when no transition is being interrupted. If I move the next/previous buttons outside of the carousel, the transitions are smooth. See https://codepen.io/gmw-web/pen/pojZwNL?editors=1010. I see that the built-in controls are also placed outside of the slides. although I don't really understand why placing the initiators of the action outside of the slide makes a difference if they still trigger the same methods/functionality in the end? 🤔 |
I looked into this a bit further, and noticed that some of the CSS classes (indicated with a red box in the image) are removed too soon, sometimes immediately. This appears to be what causes the transition to 'jump'. This only occurs when the previous/next buttons are place inside the |
I played around with the codepen a little and found that if you tab to the I also played with using a There's definitely something odd going on. |
Describe the bug
Programmatic slide control is not smooth, while navigating via built-in indicators is.
Steps to reproduce the bug
Go to https://codepen.io/gmw-web/pen/yLYqbqX?editors=1010
Click on the next/prev buttons in the slides, these trigger programmatic slide control.
See that the transition 'jumps' to somewhere halfway the animation.
Click the indicators below the next/prev buttons.
See that these trigger nice transitions.
Expected behavior
I would expect the programmatic slide control to trigger the same, smooth transitions as the indicators.
Versions
Libraries:
Environment:
Demo link
https://codepen.io/gmw-web/pen/yLYqbqX?editors=1010
Additional context
I tried setting 'keys' on the individual slides, but this did not fix the issue.
The text was updated successfully, but these errors were encountered: