Broken Carousel Navigation

[esanchezvz]

Bug is related to

• [x] embla-carousel (core package)
• [x] embla-carousel-react
• [ ] embla-carousel-vue
• [ ] embla-carousel-svelte
• [ ] embla-carousel-autoplay
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-docs (documentation website)

Embla Carousel version

• v7.0.5

Describe the bug

• After creating an embla instance (following basic example on website), it appears as if the instance is not detecting all of the slides passed to it. It does not enable the next button and when trying to drag the slider, it only drags the first slide and then returns it to its original position. I recreated the bug using a vite app, but originally I saw the issue on a Gatsby app. This issue happens on react version 16.14.0 (Gatsby app) as well as react version 18.2.0 (vite app)

CodeSandbox

• CodeSandbox

Steps to reproduce

There really are no steps to reproduce, just try and drag the slider and you will see it does not drag and the next button is not enabled

Expected behavior

• Carousel should be draggable and next/prev buttons should be enabled/disabled if there is another slider to navigate to.

Additional context

https://user-images.githubusercontent.com/41240399/205138076-2adda6ef-aa40-426e-9567-242e775e2da2.mov

[davidjerleke]

Hi @esanchezvz,

Thanks for your bug report. This is not a bug but rather caused by an incorrect HTML setup on your side. You're only rendering Slide 1 inside the container that will scroll the slides. The rest of the slides should also be children to the container and not siblings:

Best, David

[esanchezvz]

Huh, interesting. I'll take a look at whats going on. thanks for your quick response. Will close the issue then.