davidjerleke/embla-carousel

[Bug]: AutoHeight plugin is not working as expected

Closed this issue · 4 comments

Which variants of Embla Carousel are you using?

  • 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)

Steps to reproduce

AutoHeight plugin is not working as expected.

When switching between slides, if the height of a slide has been changed later the first init, the AutoHeight plugin preserves the height it read at the beginning and thus does not support the "watchResize: true" feature.

Expected Behavior

Read the new height of slide and change container height.

Additional Context

I was try to solve this with the "emblaApi.reInit()" method using hooks, but this time the smooth transition effect in height is canceled.

What browsers are you seeing the problem on?

Chrome, All browsers

Version

v8.1.6

CodeSandbox

No response

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 bug reports

@bozdevs thanks for your question. Have you seen this?

I have now reviewed and tested it. It started calculating the height, but I'm afraid the transition effect remains an issue.
It causes height jumps/breaks and slide transition jumps/breaks. "request animation frame" doesn't fix this.

In my case I handled it like this,

1- First of all, change the heights.
2- Run "reInit()" before moving on to the next slide.
3- Run "scrollNext()" to move to the next slide (setTimeout => 1ms).

(If items 2 and 3 are hierarchically replaced or triggered at the same time, it causes breaks in the transition effects.)

@bozdevs if slide heights change during transition yes, the transition will stop and the carousel will instantly snap in place. That’s because the resize event triggers a hard reset of the carousel. This is by design.

The auto height plugin is there to read heights upon initialization and re-initialization. There’s no promise that it will work when heights change every 2 seconds. But maybe I’m not understanding how you’re using it. A screen recording would probably help.

Structure of HTML

The scenario is as follows.

[Tab 1], [Tab 2], [Tab 3], [<- Back]
--------------
[Slide 1]
      |__ (Static Entry)
[Slide 2]
      |__ [Tab 1 Content] - [Tab 2 Content] - [Tab 3 Content]

Tab 1, 2, 3 buttons are;

  • Toggle the Contents visibility.
  • Move slider to next or in this case index at 2.
  • This buttons are hidden when slider index at 2.

Back button is:

  • Move slider to index at 1.
  • This button hidden by default when slider index at 1.