Carousel breaks when API data ingested

[ilmoi]

Running into a weird problem with embla-carousel-react.

Whenever the carousel depends on data pulled in via the API, it non-deterministically breaks. Specifically, the carousel has the correct number of items (>1), but scrolling doesn't work (neither with buttons, nor by dragging).

If the data is hardcoded beforehand this doesn't happen. So it seems something breaks because it goes from 0 items to eg 10.

Has anyone run into this before? Any advice? Would hate to move to another package, but this got so annoying we either need to solve it or we dont have a choice.

Our versions:

"embla-carousel-react": "^7.0.9",
"embla-carousel-autoplay": "^7.1.0",

[davidjerleke]

Hi @ilmoi,

From the Embla documentation:

useEffect(() => {
  if (emblaApi) emblaApi.reInit()
}, [emblaApi, slides])

Best,
David

[davidjerleke]

@ilmoi, did you manage to solve the problem with my help?

[ilmoi]

it worked! Thanks @davidjerleke. One piece of feedback: I would make that way more prominenet in the docs, ideall part of "get started". I spent ages on the docs and didn't think to click into this page, and it was super frustrating why such basic functionality doesn't work. Surely the default assumption for most users is their slide numbers can change. Either way - thanks for the help.

[davidjerleke]

• Add watchResize and watchSlides options #159.

The feature is on its way.

[davidjerleke]

Hi @ilmoi,

This feature has been released with v8.0.0-rc01.

Best,
David