Auto Height - How to properly set height?

[TomBell95]

Hi,

I have a slider where the content inside changes dependant on the slide, meaning that each slider can have different heights. However, as you can see in the below screenshots + sandbox, the footer will always remain in the same place once a slide with content has been viewed... How could I solve this issue? I have been following this discussion but not sure this is the same issue?

https://codesandbox.io/s/embla-carousel-default-react-forked-tybllv?file=/src/js/EmblaCarousel.tsx:430-446

[davidjerleke]

Hi @TomBell95,

Thank you for your question. I think you should try this:

1. Always make sure the plugin version matches the core package version which is embla-carousel-react in your case. So use embla-carousel-auto-height v8.0.0-rc07. Your plugin version is an entire major version behind which won't work because major versions often have breaking changes.

2. Pass the plugin directly. Embla will make the diff check if plugins have changed for you so no need to store it in ref.

- const autoheight = useRef(AutoHeight())
- const [emblaRef] = useEmblaCarousel(options, [autoheight.current])
+ const [emblaRef] = useEmblaCarousel(options, [AutoHeight()])

3. By default Embla only watches the dimension that affects the scroll functionality - It only watches changes in widths for horizontal carousels and height for vertical carousels. But in your case you want to watch both because if slide heights change you want it to pick that upp. Always returning true in watchResize will reset the carousel every time widths or heights change. In short, set your options to:

const OPTIONS: EmblaOptionsType = {
  watchResize: () => true,
}

4. The default behavior for children of an element with display: flex; is that they’re all the same height. But they should have their natural height for this to work. Change your CSS like this:

.embla__container {
  backface-visibility: hidden;
  display: flex;
+ align-items: flex-start;
  touch-action: pan-y;
  flex-direction: row;
  height: auto;
  margin-left: calc(var(--slide-spacing) * -1);
}

Unfortunately, I haven't had the chance to update the documentation so it's lagging behind. Let me know if it helps.

Best,
David

[TomBell95]

Thanks @davidjerleke, I can confirm I am using v7.1.0 for both embla-carousel-react & embla-carousel-auto-height

It now seems to be setting all slides to the height of the first slide, rather than dynamically changing on the current slide? I have also updated the Sandbox - In the screenshot this page is the same height as the first, but should be longer, so its inheriting the height from the previous slide

[davidjerleke]

Hi @TomBell95,

Yes, this is because your CSS says that your slides should all be the same height. That's the default behavior for children of an element with display: flex;. Change your CSS like this:

.embla__container {
  backface-visibility: hidden;
  display: flex;
+ align-items: flex-start;
  touch-action: pan-y;
  flex-direction: row;
  height: auto;
  margin-left: calc(var(--slide-spacing) * -1);
}

...and it should work just fine.

Best,
David

[davidjerleke]

@TomBell95 did you see my response?

[davidjerleke]

No response - closing.