Splide は jQuery 非依存で軽量かつアクセシビリティに優れたスライダーライブラリです。以前は他のスライダーライブラリ を使っていたのですが、アクセシビリティの面ではいろいろと手を加える必要がありました。Splide は標準でアクセシビリティへの配慮を追求して作られています。→ アクセシビリティ – Splide

この Splide、機能も豊富なのですが、テキストを含むスライド等それぞれのスライドの高さが異なる場合に自動調整するオプションがありません。他の有名なスライダーライブラリーでは、slick と bxSlider には adaptiveHeight、Swiper には autoHeight というオプションがあって、それぞれ値を true とすることで個々のスライドの高さに合わせて自動調整できるのですが、Splide には同様のオプションが見当たりません。autoHeight というオプションがありますが Swiper のそれとは用途が異なるようです。

仕方がないので、イベントリファレンスを見ながらスライダーの高さが自動調整されるようにカスタマイズしてみました。

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function () {
	const splide = new Splide('.splide', {
		type: 'loop',
		gap: 48,
	});
	splide.mount();
	
	splide.on('resized active', function(){
		const splideTrack  = document.querySelector('.splide__track');
		const activeSlide  = document.querySelector('.splide__slide.is-active');
		splideTrack.style.height = activeSlide.offsetHeight + 'px';
	});
});
</script>

CSS

.splide__track {
    transition: height .3s ease-out;
}

アクティブなスライドには is-active というクラスが付与されますので、アクティブスライドが変わったとき（active）にこのスライドの高さを取得し、.splide__track の高さに設定するようにしました。また、ウィンドウサイズによってもスライドの高さが変わりますので、スライダーのリサイズを完了した際（resized）にもイベントが発生するようにしています。

ただ、本当は slick や bxSlider の adaptiveHeight のように、スライダーが動き始めると同時に高さが変化するのが理想なのですが、上記の処理は動き終わってから高さが変化します。
スライダーが一方通行であれば is-next クラスがついている次のスライドの高さを取得して、move イベントでスライダーが動く直前に高さが変化するようにし、CSS の transition-duration の値をスライダーの speed オプションの値に合わせるという感じでできそうですが、前のスライドに移動する場合もあるのでそうは行きません。

Splide に adaptiveHeight オプション付けてくれないかなー。