-
SummaryI'm building a carousel that shifts by the number of items visible in the viewport. All the items have the same width. To achieve this, I set 'slidesToScroll' to match the number of visible items. However, sometimes the carousel doesn't align properly when moving to the next page. After debugging, I found that the issue seems to be with the scrollSnapList values. For example, with 24 items and a scroll of 8 items at a time, the scrollSnapList should be [0, 0.5, 1]. However, sometimes, it's returning a floating number, eg: [0, 0.5333186716516385, 1], which I think caused the misalignment. I'm not sure what caused it. However, I wonder if we can override the scrollSnapList, because this seems to be easily calculated in this specific scenario? Thanks. If applicable, which variants of Embla Carousel are relevant to this question?
Additional informationNo response CodeSandbox exampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
After digging a bit more, it looks like the issue only happens when I lazyload the component when it comes to view using the browser Intersection Observer API. When I removed the lazy load, it works perfectly fine! It's very strange! |
Beta Was this translation helpful? Give feedback.
-
|
@aygee I can't help you and debug if I don't have access to your setup in a CodeSandbox. |
Beta Was this translation helpful? Give feedback.
-
|
@davidjerleke I understand. I'll see if I can create a minimal reproduction. Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
@davidjerleke I found the bug. I had Thanks for making such a great library! |
Beta Was this translation helpful? Give feedback.
@davidjerleke I found the bug. I had
transition: 'transform 175ms ease'on the embla container and this caused the issue and also some jankiness when scrolling. Removing it makes the scroll much smoother and I don't see the issue anymore!Thanks for making such a great library!