Embla-carousel: Auto Height support

[peps]

Hi! I'm loving using Embla, but it seems to be missing a common feature that would make it perfect.

Would it be possible to add auto-height support? So when showing 1 slide at a time, the height of the container changes to match the current slide.

[davidcetinkaya]

Hi Aaron (@peps),
Thank you for your question.

The vision for Embla Carousel is that it should be a lightweight bare bones carousel library. So it should basically solve the hardest technical challenges with building great carousels and do it good.

I think adaptive height is quite easy to achieve utilizing the Embla Carousel API so I think this feature should be left out of the Embla core.

With that said, do you want me to create a CodeSandbox that demonstrates how to achieve this?
If yes, are you using the vanilla-JavaScript or React version of Embla?

Best,
David

[peps]

Hey David, thanks for the quick response. Makes sense wanting to keep it light, I ended up forcing my client to upload their images at consistent sizes, so I no longer need the functionality. But I have used adaptive height in the past with other carousels.

You're right though, if I ever need it again in the future, I could build it using the API. Ill just close the issue with this comment, thanks again ;)

[davidcetinkaya]

Hi Aaron (@peps),

Thanks for the response and I'm glad my reasoning made sense to you 🙂. Feel free to reach out if you would like me to create a CodeSandbox demonstrating an adaptive height carousel with Embla in the future.

Kindly,
David

[vntw]

Hey @davidcetinkaya,

I'm currently looking into this (nice timing), but I don't want to take much of your time for a demo, could you in a few words describe how you would achieve this the embla way before I try my approach(es) below?

I was looking at the examples (Lazy-Load to be specific since it has 1 slide displayed) and currently without testing I'd try to change the height in the scroll/select event and set the height of the .SceneDefault-sc-189h1k3-0 container (sorry don't know the internal name) to the slide's height. Would that be somewhat correct?

Thanks for your incredibly helpful responses, helped me already a few times in the past 🙂

[davidcetinkaya]

Hi @venyii,
Thank you for your question.

I decided to create a CodeSandbox to demonstrate how to achieve adaptive height with Embla. Maybe there are more people out there that would like to implement this so I figured the sandbox could be helpful. Please note that I didn't add a smooth CSS height transition to the viewport in the example, but that could be added quite easily so I'm going to leave that up to you.

Thanks for your incredibly helpful responses, helped me already a few times in the past 🙂

I'm glad you find them helpful. If it's not too much to ask, I would appreciate if you gave the responses you have in mind a thumbs up or similar. This could help other visitors/users looking to implement similar features.

Let me know if the CodeSandbox helps.

Best,
David

[vntw]

Oh wow thank you very much! Hope others find it helpful as well in the future 🙂 I went back and tried to find the helpful responses in my case and gave a 👍

Thanks again for your work!

[davidcetinkaya]

Thanks for the help @venyii. Enjoy 🙂.

[RoyiAvital]

Is there a way to have CodeSandbox which uses the CDN only?

[davidcetinkaya]

Thank you for your question @RoyiAvital.
No, sorry. I'm not planning to add CodeSandbox examples using CDN only.