【超簡単】slickで各スライドの要素の高さを合わせる方法

JavaScript

今回はslickで各スライドの要素の高さを合わせる方法を解説します。

テキストの量にばらつきがあるスライドだとこんな感じで高さが不揃いになってしまってかっこ悪いです。

slickの各スライドの高さがあっていない画像

なのでこの高さを全部合わせようということですね。

 

スポンサーリンク

slickで各スライドの高さを合わせる方法

以下のコードをそのままコピペするだけです。たったこれだけ!

.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}

.slick-trackdisplay: flex;をかけるとデフォルトでalign-items: stretchも適用され、これが子要素である各スライドに影響を与えることで高さが揃うようになります。

また、align-items: stretch;で高さが揃うのは子要素がheight: auto;の場合のみですが、.slick-slide(各スライド)にはslickがheight: 100%;をかけてしまうので、これを!importantで無理やり直します。

 

slickの各スライドの要素の高さが揃っている画像

こんな感じでslickの各スライダー要素の高さを合わせることができました!

 

ただ各スライドが画像のみでその高さが違う場合などは今回の方法は多分使えませんが、画像を切り抜くobject-fitというプロパティを使えば画像だけのスライドでも高さを揃えられると思うので、気になる人は調べてみてください。

 

まとめ

各スライドがコンテンツになっていてその高さを合わせたいときは今回紹介したスタイルを当てるだけでできてしまいます。

超簡単なのでぜひやってみてくださいね。

スポンサーリンク
JavaScript
スポンサーリンク
でざなり