updateAutoHeight() with a specific transition end value

[Hazzeldorn]

Hey guys

I am using some quite complex and animated elements inside the swiper slides (e.g. accordions that will change its height when clicked).
The swiper uses the options autoHeight: true and effect: 'slide' which make sure that the height of the swiper container is andjusted when switching between slides. But autoHeight has no effect when the height of the content inside a slide changes. This means that content is going to overflow the slide element.

I am aware that there is a method swiper.updateAutoHeight(speed). But this method calculates the current height of the content and then adjusts the swiper height in an animated manner. So when I call this function before the accordion opens, nothing happens. But I can't call it after the accordion opens because it is animated and i do not want the content of the slide to overflow it's container.

As far as I can tell, a solution would be something like this:

 // calculate the height, that the swiper should have after calling updateAutoHeight()
const newHeight = swiper.height + accordion.getHeightWhenOpen();

// define height update animation duration
const speed = 300; 

// force swiper to update (the second parameter does not actually exist but it would be useful)
swiper.updateAutoHeight(speed, newHeight); 

// open the accordion so the animation of the swiper and the accordion happen concurrent
accordion.open(speed);

TLDR: how can I force swiper to update and animate its autoHeight to a specific height value?

Has anyone else run into this problem?

Thanks

[nodeDevcoder]

Yes, I'm having this issue too. Did you solve this?

[Hazzeldorn]

Unfortunately not @nodeDevcoder. I ended up developing my own slider logic for this particular case instead of using SwiperJS 😄.

A much simpler way would perhaps be not to animate accordions within a slide, but simply to let them pop open and then update the slide height.