【slick】各スライドの高さを揃える方法（レスポンシブ対応）

slick スライダーを使うと、スライドごとのコンテンツ量によって高さがバラバラになり、レイアウトが崩れることがあります。特にレスポンシブ対応では、画面幅に応じてテキストの折り返しが変わるため、高さが不揃いになりやすいです。本記事では、slick で各スライドの高さを揃える方法を紹介します。

方法1：slick の adaptiveHeight を使う

slick には adaptiveHeight: true というオプションがあり、表示中スライドの高さに合わせてスライダー全体の高さを調整してくれます。

$('.slider').slick({
  adaptiveHeight: true
});

ただし、この設定は「各スライドごとに高さを可変にする」動作なので、複数スライドを同時に表示する場合や高さを固定して揃えたい場合には不向きです。

方法2：JavaScriptで高さを揃える

各スライドの中で最も高さの大きいものを基準にし、すべてのスライドをその高さに揃える方法です。レスポンシブ対応のため、init や setPosition イベントで処理を実行します。

function setEqualHeight(slider){
  var maxHeight = 0;
  slider.find('.slick-slide').css('height', 'auto'); // いったんリセット
  slider.find('.slick-slide').each(function(){
    var h = $(this).outerHeight();
    if(h > maxHeight) {
      maxHeight = h;
    }
  });
  slider.find('.slick-slide').css('height', maxHeight + 'px');
}

$('.slider').on('init setPosition', function(event, slick){
  setEqualHeight($(slick.$slider));
});

$('.slider').slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

この方法では、スライド数や画面幅が変わっても常に一番高いスライドに揃えられます。

方法3：CSS Flexbox を利用する

スライド内部のレイアウト次第では、Flexbox で高さを揃える方法もあります。.slick-track に display: flex; を指定すると、子要素（スライド）が同じ高さに揃います。

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

この方法は JavaScript に依存せずレスポンシブにも強いですが、スライドのデザインによっては崩れる場合があるので調整が必要です。

まとめ

• 表示中だけ高さを合わせたいなら adaptiveHeight: true
• すべてのスライドを一律の高さに揃えたいなら JavaScript で最大値を基準にする
• デザイン次第では CSS の flex を使ってシンプルに解決可能

slick でスライド高さを揃える方法は複数あります。用途やレイアウトに応じて適切な方法を選び、レスポンシブにも対応できるよう工夫しましょう。