Splideでスライドの高さをコンテンツごとに可変させる #JavaScript

今までスライダーにはSwiperを使用していましたが、Swiperよりも軽量ということで『Splide』へ変更することになりました。

特に問題なく置き換えられたんですが、Splideで１つ出来ないことが『スライドの高さに合わせて、全体の高さを自動調整する』です。
Swiperでいうところの『autoHeight』がないのです。

オプションに一応あるんですが、trueにしてもSwiperのような動きはしません（使用目的が多分違うのだと思います）。

やりたいこと

Splideでもスライドの高さに合わせて全体の高さを自動調整するようにしたい。

原因

そもそも、スライドを並べてるエリアはdisplay:flexで横に並べており、全体の高さはコンテンツ内で一番高いものに揃うのが当たり前なんですよね。

では、Swiperはどうやっているのか？
『autoHeight』をtrueにすると、アクティブになっているスライドの高さを取得→スライドを囲むdivに高さを指定、ということで自動調整するようになっていました。

これと同じことをSplideでもやればいいのでは？　というわけでやってみました。

Splideでも自動調整をさせる方法

See the Pen autoHeight with Splide by Mei Koutsuki (@mei331) on CodePen.

codepenを見てもらえば早いですが、簡単に解説を。

var mySlide = new Splide( '.splide', {
  type   : 'slide',
  focus  : 'center',
  gap    : '5%',
  start  : 0,
  perPage: 1,
  padding: '8%',
  updateOnMove: true,
});

普通のセンターフォーカスのスライドで、1枚表示。
自動調整で必要なオプションは、updateOnMove: trueです。

これは「is-activeクラスを移動前に更新するかどうかを決定」するオプションで、これをtrueにしておきます。

mySlide.on( 'mounted', function () {
  const setNum = 1; // start の数字+1を指定
  const slideEle = document.querySelector('.splide .splide__slide:nth-child('+setNum+')');
  const visHeight = slideEle.offsetHeight;
  const wrapEle = document.querySelector('.splide .splide__list');
  wrapEle.style.height = visHeight+'px';
});

mySlide.mount();

mySlide.on( 'mounted', function () {});は「すべてのコンポーネントがマウントされた直後に発生」するイベントで、mount()の前に書く必要があります。
詳しくは、イベントリファレンスを見てください。

ここで、読み込まれた時のスライドの高さをスライドに合わせています。
動きとしては、スライドが表示された（マウントされた）とき、最初に表示するスライドの高さを取得→スライドを囲んでいる.splide__listに高さを指定、という感じです。

mySlide.on('move', function () {
    const actEle = document.querySelector('.splide .splide__slide.is-active');
	const actHeight = actEle.offsetHeight;
    const wrapEle = document.querySelector('.splide .splide__list');
    wrapEle.style.height = actHeight+'px';
});

mySlide.on( 'move', function () {});は「スライダーが動く直前に発生」するイベントです。

スライダーが動く前に、is-activeのスライダーの高さを取得→スライドを囲んでいる.splide__listに高さを指定しています。
ここできちんとスライダーの高さを取得するために、updateOnMove: trueしておく必要があったわけです。

'move'ではなく、アクティブスライドが変わったときに発生するイベントの'active'でもいいと思います。
ただその場合、updateOnMove: trueになってないと、スライドが切り替わってから高さが変化するので、動きがちょっとワンテンポ遅れます。

ページがカクカクするので

今回は必要があって実装したんですが、この自動調整は、全体の表示がカクカクしてしまうので、使い所は注意したほうがいいと思います。
（これはswiperのautoHeightにも言えることではありますが）

必要な方の参考になれば幸いです。