1. Feedback
  2. JavaScript
  3. 52446

Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Carousel with loop set to false starts to misbehave after resize

To demonstrate the issue I took your carousel demo in StackBlitz and forked it just changing it to set loop to false.

If you open the following and then resize the preview pane straight away the currently visible slide jumps to a different one and the navigation doesn't work properly (it also seems to get stuck). Depending on the current pane when you resize it sometimes seems to partially work:

https://stackblitz.com/edit/vxymhb?file=index.js

I noticed the issue initially in React when I had a carousel with a single slide and loop set to false where a resize caused the slide to vanish (it's been translated outside the visible area by the same bug). So if you open this and then resize the preview pane you'll see that behaviour I'm describing:

https://stackblitz.com/edit/vxymhb-yypzet?file=index.js

From a quick look at the code I can see that when loop is set to true the control clones the last slide to go before the first slide and the first slide to go before the last when it's setting up the slides - my guess is that the resizeHandler is calculating the translationX on the assumption there is always a cloned slide at the start (i.e. loop is enabled), and not taking into account the fact that when loop is false there is no cloned slide, so hopefully it should be a relatively simple fix to resizeHandler for you to sort it :)