Skip to content

[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

Closed
gmw-web opened this issue May 13, 2020 · 5 comments · Fixed by #5462
Closed

[Carousel] programmatic slide control not smooth #5361

gmw-web opened this issue May 13, 2020 · 5 comments · Fixed by #5462

Comments

@gmw-web
Copy link
Contributor

gmw-web commented May 13, 2020

Describe the bug

Programmatic slide control is not smooth, while navigating via built-in indicators is.

Steps to reproduce the bug

  1. Go to https://codepen.io/gmw-web/pen/yLYqbqX?editors=1010

  2. Click on the next/prev buttons in the slides, these trigger programmatic slide control.

  3. See that the transition 'jumps' to somewhere halfway the animation.

  4. Click the indicators below the next/prev buttons.

  5. 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:

  • BootstrapVue: 2.14.0
  • Bootstrap: 4.4.1
  • Vue: 2.6.11

Environment:

  • Device: PC
  • OS: Windows 10 Enterprise
  • Browser: Chrome
  • Version: 81.0.4044.138

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.

@tmorehouse
Copy link
Member

tmorehouse commented May 13, 2020

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.

@tmorehouse
Copy link
Member

Internally the carousel uses the same next, prev, and setSlide methods.

@gmw-web
Copy link
Contributor Author

gmw-web commented May 13, 2020

I forgot to mention I had set the interval to 0 in my own code, to prevent the carousel from auto-sliding (updated the original codepen.)

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 really hoped to avoid having to place the buttons outside the carousel, as this would break our layout. I try to use the carousel in a 'wizard' kind of way (a users needs to click through some steps, and in each step they need to click a specific target inside the slide).

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? 🤔

@gmw-web
Copy link
Contributor Author

gmw-web commented May 14, 2020

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 b-carousel-slide. When the buttons are placed outside of the carousel, the classes are removed only after the animation ends.

image

@Hiws
Copy link
Member

Hiws commented Jun 2, 2020

I played around with the codepen a little and found that if you tab to the prev or next buttons. then use enter to activate the button the correct transition plays. While click the button as you explained causes a glitchy jump in the transition.

I also played with using a setInterval to trigger the next/prev methods.
Using a delay of 250 somehow manages to make the transition play out correctly (95% of the time).

There's definitely something odd going on.

https://codepen.io/Hiws/pen/dyGbaMz

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants