[Help]: If one of the slides triggers scroll in the "Wrapper" 🙏

[bozdevs]

Summary

I have a main wrapper. It has nothing to do with Embla Carousel. This wrapper has a maximum height, if the carousel inside exceeds this height, "Scroll" appears.

• My Embla Carousel consists of two "Slides".
• The heights of the slides are different from each other.
• It also uses the "Auto Height" plugin. (That is, the height is recalculated when transitioning between slides)

Scenario:

• If (Slide 1) does not fit and "Scroll" appears,
• When we transition to (Slide 2), the height is recalculated and this time "Scroll" disappears.

The problem is this:

• Since the "Scroll" is lost, a width value of 16px "Variable" is shortened. Since Emblacarousel does not calculate this dynamically, it acts according to the previous width value and gets confused, it gets into a "BUG" and cannot perform the "snap" event, and gets a bug of "Lost Scroll width" and stays in an infinite loop.

Additional information

• containScroll

• align

• watchResize

I tried all the settings one by one with different options but I couldn't get any results.

I especially expect the default watchResize: true to solve this but it doesn't work either.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

CodeSandbox example

No response

[davidjerleke]

@bozdevs thanks for your question.

I can't help you without a CodeSandbox with your setup along with clear steps to reproduce the problem. Please provide that if you want help with debugging.

Thanks for understanding.