Unexpected results from scrollSnapList method
See original GitHub issueHello,
I am trying to create a carousel with this effect, pictured in screenshot 1 below. The implementation is similar to your iOS Picker example, where a rotation angle is calculated from the scroll progress. The problem is when a window resize event is triggered, some of the slides no longer center properly, see screenshot 2. Even if the window is resized by 1px, the difference is pretty drastic.
Screenshot 1
Screenshot 2
It seems that when the carousel is first initialized, embla.scrollSnapList()
will return [-0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]
for a carousel with 10 items, which looks right to me. However, after a resize event, embla.scrollSnapList()
will return a different set of values, something like this [-0, 0.15507861048245647, 0.24100075577592645, 0.26451379351226284, 0.31647667722977557, 0.4308486685044219, 0.5452166758190794, 0.5971744258431836, 0.6898427790350868, 0.8449213895175434]
.
I would like to understand why embla.scrollSnapList()
is returning different values after a resize event, and how I can force it to always use the correct snap points generated on initialization.
Thanks in advance
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
@davidcetinkaya, the ReactJS solution to #116 was indeed what I needed. I just needed to figure how to do the same thing with VanillaJS.
Here is the solution I came up with, for anyone who has a similar issue:
Hi @davidcetinkaya, I was able to find a solution. Thank you so much for your help and pointing me in the right direction. Have a nice day!