[Help]: loop: true not working when images have variable width

[pReya]

Hey David,

thanks for your work on Embla. I think it's a lovely library, and I've used it successfully before. However in my latest React project I have a problem that I can't be able to solve. I am using embla-carousel-react in v7.0.5.

I have built a custom React component around Embla, that accepts Images with Captions via a prop. When I use this component in Isolation (in my component gallery/storybook), everything works great (including the loop option).

However if I use the component "in production" inside of my project (which uses Astro as a site generator), I always get this error when I load a page containing the Image slider, and the images never "wrap" around (the space to the left of the first image is always empty)

I am trying to debug this problem further, but I'm a little lost on how to find the culprit/problem. Something in my setup seems to conflict with Embla, as I cannot recreate this in isolation. Any ideas on how to approach this problem?

[davidjerleke]

Hi @pReya,

Thank you for your question. My guess would be that there are no slides when you initialize the Embla script. Try only attaching the emblaRef when you have any slides and pass null when there aren’t any like so:

ref={slides.length > 0 ? emblaRef : null}

Let me know if that’s the culprit or not.

Best,
David

[davidjerleke]

@pReya you should set placeholders to prevent layout thrashing. Your website will jump every time an image loads which can be really annoying for visitors.

This is why Embla doesn’t behave as expected the first time: Because the images haven’t loaded by the time Embla initializes so they don’t have any dimensions. Embla can’t calculate any loop positions without any dimensions to pick up. And it doesn’t have any automatic way of detecting changes in slide sizes.

The browser will get the images from its cache the second time you browse the page with the carousel so they will instantly have their correct dimensions when Embla initializes. That’s why it’s working the second time you visit the page with the carousel.

[pReya]

@davidjerleke Thanks for clearing that up! So just to make sure I understand this correctly: Embla's loop option will only work, if the actual <img> tag has an explicitly set width or height via CSS or width/height attribute? It will not work, if the max height/width of a slide is defined on the parent container?

[pReya]

I've now given every <img> and explicit height px value. Still, the wrapping behavior hasn't changed :(

[davidjerleke]

@pReya Isn’t your carousel horizontal? If that’s the case, you need to give them a width. The width doesn’t have to be a fixed pixel value, it can be percentage too. In any case, the width needs to be set for horizontal scrolling carousels.

[pReya]

Thanks a lot, that seems to do the trick, indeed! Not sure I understand the difference between my code, and your documentation regarding variable sizes, though. Will try to dig deeper into this topic and see how I can build a heigh-restricted slider with variable image widths.

Thanks for pointing me in the right direction!

[pReya]

@davidjerleke Sorry for digging this up again. I am really confused: Is it possible to use Embla (in general) and also the loop option with dynamic width slides (e.g. not just variable as in "every slide has a different, but known/static width that we can put into css" but rather dynamic as in "we don't know how big these images are beforehand, b/c they come from user-editable content or an external API")?

If not, then what is the docs section for, where you mention using the flex: 0 0 auto; (https://www.embla-carousel.com/guides/slide-sizes/#variable-sizes)? Because currently I am not sure how to use this. Just adding this to the stylesheet will break Emblas functionality (I've created an example here: https://codesandbox.io/s/embla-carousel-variable-widths-loop-problem-es4tz6)

If yes, I really think this should be mentioned in the docs or there should be an example for "dynamic width slides".

[pReya]

@davidjerleke Yes, I'm aware that this is not production-ready code. Obviously it's not a good idea to wait for a specified amount of time. I only used it trying to make a point: Even if reInit is called after all images have loaded (however long it may take), it will not fix/rerender/modify the missing wraparound/loop layout.

[davidjerleke]

@pReya I see. I’ll take a look at your timeout sandbox and try to figure out what’s going on then. Can’t promise when though.

[davidjerleke]

Hi @pReya,

Thank you for being persevering with this. So I had a couple of minutes to dig into this and managed to figure out why this is happening. I can confirm that this is a bug and it’s related to this:

Enables infinite looping. Automatically falls back to false if slide content isn't enough to loop.

The explanation of the loop option in the docs 👆🏻.

This is what’s happening:

1. You initialize Embla with images that are loading so the slide widths are 0.
2. Embla makes the decision that your carousel doesn’t have enough slide content for the loop effect to work. So it automatically falls back to loop: false.
3. After the timeout the images have loaded and the slides have their final widths.
4. You run reInit() and Embla actually calculates everything correctly - even the loop positions. So there’s nothing wrong with the flex: 0 0 auto; calculations. But since falling back to loop: false, Embla mutated the original options with loop: true you passed to the useEmblaCarousel() hook.
5. So from now on every reInit() you call without the options parameter will be with loop: false.
6. What Embla should do is that it should reset the original options to loop: true after falling back to loop: false when slide content isn’t enough for the loop effect to work. So the next time you run reInit() Embla should try loop: true again.

I know what needs to be done in the code to fix this so I’ll let you know when I have released a patch with a fix for this. But can’t promise when though.

Cheers,
David

[pReya]

@davidjerleke Thanks for following up and confirming that this is indeed a bug. I'll be looking out for a new release ;)

[davidjerleke]

Hi @pReya,

I just released v7.0.6 which includes a fix for this bug:

• When Embla falls back to loop: false it replaces the user provided loop option #414

Try it out and see if it behaves as expected now if you want. Thank you for your contribution 👍.

Cheers,
David