Initial Carousel Blank

[kush-daga]

Bug is related to

• embla-carousel (core package)
• embla-carousel-react
• embla-carousel-autoplay
• embla-carousel-docs (documentation website)

Embla Carousel version

• v6.0.2

Describe the bug

Embla carousel is initially blank, and needs to be resized before it renders the image. This happens only sometimes and randomly. I have read the other issues regarding the same, but none of the tehniques work, I understand its a reinitializing issue but cannot figure out how to make it work. I am using it with NextJs 12.

I have the sample code to get started in this github repo - https://github.com/kush-daga/emblademo

CodeSandbox

• The link to a CodeSandbox that demonstrates the bug clearly.

Steps to reproduce

1.Clone the https://github.com/kush-daga/emblademo repo, and yarn dev.
2. Initially its a blank screen, resize to view images.

Expected behavior

• Carousel should work in the first render

Additional context

Screencast.from.10-01-22.09_42_59.PM.IST.mp4

[davidjerleke]

Hi @kush-daga,

You didn’t provide a CodeSandbox which makes it cumbersome for me to debug this and show you what needs to be changed in your code.

My initial guess is that you’re using the init event to run some functions. The issue with that event using the react package of Embla is that it probably fires before you get access to the API. So try replacing any code with the init event:

embla.on("init", functionToRun)

…with:

functionToRun()

I’m considering deprecating the init event because it only works as expected for vanillaJS users.

But as I said, I haven’t done any debugging so I’m not sure about this. If you want me to debug this further, please create a CodeSandbox and share the link.

Kindly
David

[kush-daga]

Thanks alot! And sorry for not providing a codesandbox, will try this out and if needed will create one. Also in this method now would I manually need to check if it's initialised?

[kush-daga]

Hey @davidjerleke I tried it out, doesnt seem to be working?

Here is the codesandbox link - https://codesandbox.io/s/strange-cherry-4s4rg?file=/components/CarouselComponent.tsx

Try refreshing or hard refreshing, it works sometimes, and sometimes its just blank as shown in the video

[davidjerleke]

@kush-daga thanks for the CodeSandbox link. I’ll do some debugging when possible.

[kush-daga]

@davidjerleke Alright thanks! Will wait.

[davidjerleke]

@kush-daga as I suspected this isn't a bug with Embla. There's a race condition that's causing your problem, because you're sometimes setting the height of the carousels before Embla has been initialized.

Here's a working CodeSandbox.

Best,
David

[kush-daga]

Hey thanks for this, but I think its still not working @davidjerleke, if u refresh the window and check, it sometimes would fail, leading to only a red background, and resizing it would render the images.

Like this

[davidjerleke]

@kush-daga I can’t reproduce the error in my CodeSandbox. How do you reproduce it?

[kush-daga]

@kush-daga I can’t reproduce the error in my CodeSandbox. How do you reproduce it?

I just refreshed the window, probably try opening the screen in a new window, and try hard refreshing one or two times. Ill add a video to showcase the same if needed.

[davidjerleke]

@kush-daga, have you checked your console for errors when the carousels don’t get their heights applied?

[kush-daga]

Yep, nothing. @davidjerleke

Sometimes this also occurs, that a few images are rendered and few arent. I think the core issue is after I inspect the elements, is that the viewport has the height of 0px applied to the style

[kush-daga]

In the above example, the first image doesnt render and the rest do, as soon as I resize, the first one appears as well

[davidjerleke]

Try adding this:

useEffect(() => {
    if (!embla || !slides || !slides.length) return;
    onMount();
    embla.reInit(); // This
}, [embla, slides, onMount]);

[davidjerleke]

If that doesn’t work you’re probably doing some height reading things in the wrong order.

[kush-daga]

That doesnt work, so the reason for me having that height calculating function was to adjust for dynamic heights in diff slides. I feel that there is one way in which i dont encounter this, when I comment these

[kush-daga]

Im still figuring out if it actually fixes this and if it isnt causing any other side errors

[kush-daga]

Yeah this seems to fix it in my actual application code as well @davidjerleke it probably has something to do with calculating the heights initially.

[kush-daga]

https://codesandbox.io/s/bold-butterfly-u52p1?file=/pages/index.tsx

Here is a working link example, with multiple images as well of dynamic heights. Could be helpful to anyone else facing this issue.

Thanks alot @davidjerleke for all the replies and help!

[davidjerleke]

@kush-daga thank you for sharing 👍🏻.

Just wanted to let you know that what you want to achieve will be available as an Embla plugin as soon as I get some time to make it:

• #284

Best,
David

[kush-daga]

That would be wonderful, thanks!

[davidjerleke]

@kush-daga I've just released the Auto Height plugin with v6.1.0. Here's the release details. Just make sure your slides have their natural height before initializing Embla so Embla can pick them up. So don't set height: 0; on your slides or similar.

Best,
David