Toggle axis example

[rolandtoth]

Thanks for this wonderful carousel, I'll definitely use it my next project.

One question though: I tried to use .reInit(options) to switch between horizontal and vertical layouts (axis) on a button click, but no joy. Apparently the carousel moved in the desired direction, but only the first image was shown in the "other axis" mode. It seems it was a CSS (embla.css, ".embla__container" being flex and other width/height values) issue but I couldn't figure it out. Any chance of an example that can achieve this?

[davidjerleke]

Thanks, and thank you for your question Roland (@rolandtoth),

I will set up a CodeSandbox as soon as possible demonstrating this. I'll let you know when I have something.

Kindly,
David

[davidjerleke]

Hi again Roland @rolandtoth,

I've created a CodeSandbox demonstrating how to achieve this. The trick is to change the container CSS to flex-wrap: wrap; when you want a vertical carousel in order to stack the slides vertically. Please note that a vertical carousel needs a height set for the overflow to work.

Please also note that Embla Carousel doesn't care about the CSS you use to stack items vertically or horizontally, you might as well use CSS grid to achieve this. I used flexbox to do it =).

Let me know if it helps!

Best,
David

[rolandtoth]

Hi,

very nice, thanks! I was close as I also tried flex wrap but couldn't get it to work.

An unrelated question: is dangerouslyGetEngine() an undocumented feature? Is it safe to use?

Thanks again,
Roland

[davidjerleke]

I’m glad it helped @rolandtoth.

About the dangerouslyGetEngine(), yes it’s not documented but it’s safe to use if you know what you’re doing 🙂. The method basically exposes most of the internal Embla Carousel engine, and is intended to aid plugin authors with maximum extensibility. Another purpose is that it enables for extending the carousel with features that either won’t be added to the core itself, or features that will be released later on.

I hope this answers your question?

Best
David

[rolandtoth]

Sure, it's dangerously enough for me, thanks :)