Auto height for mobile layouts

[waveforcemedia]

Is there a way to auto adjust the height for mobile based on the height of the content? Currently, it is taking the height of the biggest slide and then it leaves a gap on the bottom for shorter slides. I know it's possible to adjust the font size as the viewport shrinks....but since we are using bigger font/text for a slider, it does create gaps for certain slides.

Would this require CSS to fix?

BTW, thank you for this awesome slider! :)

[NaotoshiFujita]

Unfortunately, there is no easy way to do that because Splide enumerates slides by the flex layout. But you can achieve it by applying the height of the active slide content to the slider root element whenever the slider moves and the window is resized.

splide.on( 'active', Slide => {
  splide.root.style.height = `${ Slide.slide.firstElementChild.clientHeight }px`;
} );

(The code is just an idea)

https://splidejs.com/guides/events/#active
https://splidejs.com/guides/events/#resized

[smi-j]

Thanks for responding. Sorry, wish we were better at javascript. How would you implement the code you mentioned? Would we put your code in the main splide js file or somewhere in the script below?

<script>new Splide( '.splide', {
type: 'loop',
autoplay: false,
interval: 3000,
perPage: 1,
perMove: 1,
autoHeight: true,
pauseOnHover: false,
pauseOnFocus: false,
pagination: 'button',
} ).mount();
</script>

[NaotoshiFujita]

In the code you pasted.
But as I mentioned in the comment, my code just shows an idea, which means it doesn't work only by pasting it as is.