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

2025年11月5日

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

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

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

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

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

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

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

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

素材の壺