[Feat]: Auto Height and slide changing height

[codeflorist]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

Currently it seems, that the Auto Height plugin only resizes the container on initial load or if the window is resized.

But what if the content of a slide changes height (e.g. the slide contains an accordeon or a form, that displays errors on submit)?

It would be great, if Embla detects this and resizes it's container accordingly, so no content is cut off.

This is especially needed, if Embla is used to group general page-content into tabs.

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

@codeflorist thanks for your question.

Try setting watchResize option to this:

const options = {
  watchResize: emblaApi => emblaApi.reInit(),
};

Does that solve it?

[davidjerleke]

@codeflorist my initial suggestion was too simplistic. Instead, I recommend implementing your own logic like so:

const options = {
  watchResize: (emblaApi) => {
    if (heightHasChanged) {
      emblaApi.reInit()
    }
  },
};

this works rather well for now. but it would be great, if Embla can do this out-of-the-box.

However, I’m wondering—what if the height changes are animated, as many users tend to do? Wouldn't that trigger multiple resize events, potentially leading to performance issues?

[codeflorist]

I guess that, if i have to determine heightHasChanged myself, it would still need the code i'm currently using in the onMounted hook. So it's not really an improvement.

I don't know, if smooth transitions change the amount if resize events. But it's strange, that my solution using useElementSize doesn't show these performance problems. VueUse uses ResizeObserver for it (see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). What are you using for watchResize?

[davidjerleke]

I guess that, if i have to determine heightHasChanged myself, it would still need the code i'm currently using in the onMounted hook. So it's not really an improvement.

@codeflorist, the second argument to the watchResize handler is ResizeObserverEntries, as mentioned in the docs. So yes, Embla uses the ResizeObserver under the hood. This should allow you to achieve your goal without needing to rely on VueUse.

const options = {
  watchResize: (emblaApi, entries: ResizeObserverEntry[]) => {
    for (const entry of entries) {
      const entryIsSlide = entry.target !== emblaApi.containerNode();

      // If slide size has changed, regardless if it's height or width, reinit Embla
      if (entryIsSlide) {
        emblaApi.reInit();
        return false;
      }
    }

    // If no slide size has changed, allow Embla to run its default resize behavior
    return true;
  },
};

[davidjerleke]

@codeflorist In the upcoming v9, this issue is handled automatically in the plugin code: link. I’m closing this.