slickでスライド画像の高さを揃える方法

画像等のスライドでよく使われるslickですが、異なるサイズの画像をスライドさせようとすると、一番大きい画像の高さが反映されてしまい、画像によっては下の要素との空白が大きくなってしまいます。js内でadaptiveHeight: trueを設定してスライドの高さをそれぞれの画像の高さに調整することもできますが、ページ自体の高さが可変してしまうので見にくくなってしまうのと、スクロールを基準にしたスクリプト等を組み込んでいる場合はそれによって発火位置がズレてしまうといったことも起きてしまうので私は余り使用していません。

●デフォルトのものとadaptiveHeight: trueを適用したデモページ
http://www.marukin-ad.co.jp/marulog/link-html/20230721/1/

<div class="slide">
 <div class="items"><img src="img1.jpg" alt=""></div>
 <div class="items"><img src="img2.jpg" alt=""></div>
 <div class="items"><img src="img3.jpg" alt=""></div>
 <div class="items"><img src="img4.jpg" alt=""></div>
</div>

サンプルでは、このように単純な構造のスライドにしています。
デモページのように、スライドによっては画像がボタンから大きく離れてしまったり、スライドの高さが可変して視認性が悪くなっていますが、slick.cssを少し調整するだけで各スライドの高さを合わせることが可能です。
今回の調整では、スライド内の全ての画像の高さを一番大きいものに合わせるために、それ以外のものにはobject-fit: cover;をかけて同じ高さで表示させる方法を採用します。強制的に高さを揃えるため、高さが小さい画像は図のように左右がトリミングされて表示されない状態になります。

1. .slick-track内のdisplay: block;をdisplay: flex;に変更

2. .slick-track内の:before、:after削除

3. .slick-slide内のfloat、heightを削除

4. .slick-slideの直下のdivに対してheight:100%;追加

1の部分では.slick-trackがスライドの要素を囲う親要素になっているので、これにdisplay:flexをかけて横並びにします。
2,3の部分では、デフォルトの仕様がfloatで横並びに設定しているので、これを解除し親要素のflexで横並びにします。floatを削除したため、:before、:afterが必要なくなったので削除してしまいます。heightがかかっていると高さが揃わないため、これも削除します。
4のdivは、slick側で自動的に追加されるdivになります。そのため.slide >.items{}のようにcss指定を行うと表示が崩れてしまうので、その点も注意してください。
以上の4箇所を修正するだけです。あとは自分で用意したスライドの要素（今回でいうと.items）に対してheight:100%;、画像に対してobject-fit: cover;を設定すれば各スライドの高さを合わせることができます。

●調整したデモページ
http://www.marukin-ad.co.jp/marulog/link-html/20230721/2/

こちらが修正後のスライドになります。各画像の高さはバラバラですが、スライドとしての高さは揃っているのがわかるかと思います。
注意点としては、もともとのサイズが小さいものほど画像自体が拡大されて表示されるため、見栄えが悪くなったりしてしまうので、高さが大きく異なる場合は気をつけてください。

今回の調整方法では、高さの異なる画像を並べた場合でも各スライドの高さが揃うというものになるので、画像の下にキャプションを追加する場合等は更に調整が必要かもしれませんが、基本部分は今回の調整で対応できると思います。slickでよく使われるcenterModeはこの調整を行った場合でも問題なく動作します。
デフォルトの画像の高さが異なり下の要素と離れて見えてしまったり、adaptiveHeight: trueを設定して高さが揃わなくなってしまうのが嫌だという場合にこちらを試してみてください。

WEBプログラマー ／ K.S