BLOG

ブログ

  • Web制作

slick スライダーで各スライドの高さを揃える

slickスライダーで各スライドの高さを揃える

明けましておめでとうございます。
本年もよろしくお願いいたします。

さて、slick.js でテキストコンテンツスライダーを実装すると各スライドのテキスト量によってスライドの高さがバラバラになってしまいます。

こんな感じで高さがバラバラになってしまいます。

でもこれでは見た目が良くないですね。

そこで css を使って高さを揃えてやることにします。

// CSS

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

まずは各スライドの親となる.slick-trackdispaly; flex;をかけてやります。

次にslick.cssによってスライド要素になる.slick-slideheight: 100%;が効いているので、これをheight: auto !important;で無理やり高さを自動にしてやります。

これだけで各スライドの高さが一番高いものに揃います。

これで見た目が綺麗になりましたね。

それでは皆様、改めまして本年もどうぞよろしくお願いいたします。