I can't get AutoHeight to play ball

[JoshuaCrewe]

Bug is related to

• embla-carousel (core package)
• embla-carousel-react
• embla-carousel-autoplay
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (documentation website)

Embla Carousel version

• v6.2.0

Describe the bug

When using embla carousel with the autoheight plugin, the slide heights remain the same. The autoheight plugin detects each slide height as the same, which is to say the tallest slide in the pack.

CodeSandbox

https://codepen.io/venncreative/pen/qBVerQL

(CodeSandbox doesn't play well with my Firefox browser)

Steps to reproduce

1. Follow the "Get Started" section of the docs
2. Include AutoHeight plugin (either as module or CDN)
3. Include slides of different heights
4. When selecting new slides, the height remains the same

Expected behavior

I would have expected the slide height for the embla container to change depending on which slide was currently active. In the demo above I included text underneath to show where the container ends.

Additional context

I am sure I am misunderstanding how this plugin works and suspect that the flex styles are setting the height as all the same perhaps which is then detected by the JS. I am not sure though. I had no luck debugging the code, it is being loaded and it running, it just detects all the elements heights to be the same and presumably applying that.

I have implemented the wheel gestures plugin so I assume I am including plugins correctly.

[davidjerleke]

Hello @JoshuaCrewe,

Thank you for your question. Embla will pick up the slide heights at the very moment it's initialised. It doesn't have a clue what you put inside your slides (images or other things), and it doesn't know if the slide heights change when your images have finished loading and their heights change.

Please read my answers in the following discussion from the focused comment and onwards. I mention two different ways to solve this in that discussion:

1. If your CMS provides image dimensions that are available before your images have loaded, create appropriate placeholders for your images with their respective heights. This will enable Embla to pick up the correct slide heights before the images have finished loading.
2. Add event listeners to your images and run embla.reInit() when all images have finished loading.

Let me know if it helps.

Best,
David

[JoshuaCrewe]

Wow. Thanks for getting back to me so quickly with that response!

I think I am following your logic here. The contrived example uses images as I thought that would be the simplest implementation to see and make. The actual implementation on the site I am working on it all text. I get the same behavior whatever I put in the slides.

I have created another pen which doesn't use images but plain text.

https://codepen.io/venncreative/pen/mdqNwWX

(I am also having a look at the classNames plugin and noticing that isn't doing anything for me either. Which is really enforcing the idea that I do not know what I am doing. It works in the codepen though so I can look at what my actual code is throwing.)

[davidjerleke]

@JoshuaCrewe, aha, I see what's happening there. I think your slides actually have the same height regardless of their content. And the reason for this is your CSS. If you set display: flex on your container, the default behaviour is that any immediate child element inside that container will share the same height as the highest child (meaning they'll all have the same height). So aligning your slides will respect the natural height of each and every slide, and it should solve your problem:

.embla__container {
  display: flex;
  align-items: flex-start; /* Add this */
}

Cheers,
David

[JoshuaCrewe]

Holy fudge!

This absolutely solves the issue, THANKS! I wonder if we could include this in the docs? Would you consider a PR if I made one (I don't want to assume you would do any more work for me!)

[davidjerleke]

@JoshuaCrewe I would very much appreciate a PR 🙂!