Unexpected results from scrollSnapList method

Hello,

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

[krikienoid]

@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:

embla.on('resize', () => {
    // Remove transforms
    embla.slideNodes().map(slideNode => {
        slideNode.style.opacity = 0;
        slideNode.style.transform = 'none';
    });

    // Re-initialize Embla in order for it to pick up the correct element dimensions
    embla.reInit();
    embla.dangerouslyGetEngine().translate.toggleActive(false);

    rotateSlidesFunc();
});

[krikienoid]

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!