search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.5k stars 167 forks source link

Carousel gets in an infinite loop when using scrollTo for the first time in Next.js #380

Closed SaizFerri closed 1 year ago

SaizFerri commented 1 year ago

Bug is related to

Embla Carousel version

Describe the bug

I copied all the code from the navigation example with dots into a component in Next.js to use in there. After starting to test the carousel I noticed that when clicking on the second dot for the first time, embla gets stuck in an infinite loop while calculating the transform value for the second slide. This stops after some seconds and we see the second slide.

CodeSandbox

Link to reproduction

Steps to reproduce

  1. Go to on the sandbox link above
  2. Start the example
  3. Open the devtools and select the first slide so that you see the inline styles applied to embla__container
  4. Click on the second dot to navigate to the second slide
  5. Observe how you do not see the second slide and see the bug in the inline style of embla__container

Expected behavior

Clicking on the second dot should navigate to the second slide immediately

Additional context

https://user-images.githubusercontent.com/19834971/194715040-1add36e1-f4ca-4825-b59e-0b5ea5567d03.mp4

SaizFerri commented 1 year ago

I just found out that the cause is the speed I set. My speed was set to 400 which is causing this super fast scrolling. Somehow after the first time it scrolls it just breaks and there is no more smooth scrolling. I think it is not clear from the docs what value range makes sense. The default is 10 but 10 what? Would be nice to have a clear unit of what that 10 means (ms or s or something else) Btw. Thanks for this library!

davidjerleke commented 1 year ago

Hi @SaizFerri,

Thank you for your bug report.

I think it is not clear from the docs what value range makes sense. The default is 10 but 10 what? Would be nice to have a clear unit of what that 10 means (ms or s or something else)

The speed option is actually controlling the magnitude of the attraction force to the target (where the carousel is headed). Embla doesn't use simple transitions to scroll. Instead, it uses a simple physics simulation when scrolling. This isn't easy explain so I decided to call it speed, because it's simpler for most users to understand what it does.

You've already figured out that only a certain range makes sense and that range is1-20. Feel free to make a contribution and add this to the docs. I would happily accept a PR.

Best, David

SaizFerri commented 1 year ago

Hi @davidjerleke thanks for the fast response! Now it makes sense. I will open a PR and add this that you told me to the docs 👌

davidjerleke commented 1 year ago

Solved in #381.