2022年11月5日

【コピペでOK】slickでスライドの高さを揃えるためのCSS

スライダーを実装する際、使い慣れているため「Slack」をよく使用するのですが、少し困ってしまうことがあります。それは「スライド(.slick-slide)の高さが揃わないため、縦線や背景色を付けたい時に同じ高さにならない」という現象です。

今回はこの困りごとを解決するための、slickでスライドの高さを揃えるためのCSSを書いていきます。

困ってしまう状況の例

まずはslickでスライド(.slick-slide)ごとに背景色を付けた場合に高さが不揃いになってしまう状況のイメージです。

この状況に対してCSSを適用することで、以下のようなイメージにしたいと思います。

それではCSSを記述しましょう。

slickのスライドの高さを揃えるためのCSS

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

これらをコピペするだけで、意図した状態になります。呆気ないですが、これでslackの困りごとは解決です。

以上、slickでスライドの高さを揃えるためのCSSでした。

コメントを残す

メールアドレスが公開されることはありません。