Closed JoshuaCrewe closed 2 years ago
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:
embla.reInit()
when all images have finished loading.Let me know if it helps.
Best, David
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.)
@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
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!)
@JoshuaCrewe I would very much appreciate a PR 🙂!
Bug is related to
Embla Carousel version
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
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.