【jQuery】スライダーの各スライドの高さを揃える完全ガイド｜matchHeight・adaptiveHeight・slick・CSSのみの解決まで

スライダーで各スライドのコンテンツ量が異なる場合、高さがバラバラになって見た目が乱れます。この記事ではjQueryで高さを動的に揃える方法・matchHeight・slickのadaptiveHeight・CSSのみの解決方法まで解説します。

実装方法の比較

jQueryで最大高さを取得して全スライドに適用する

function equalizeSlideHeights() {
  var $slides = $('.slide');

  // いったんautoにリセット（リサイズ時の再計算のため）
  $slides.height('auto');

  // 全スライドの高さを取得して最大値を求める
  var maxH = 0;
  $slides.each(function () {
    maxH = Math.max(maxH, $(this).outerHeight());
  });

  // 全スライドに最大高さを設定
  $slides.height(maxH);
}

$(function () {
  equalizeSlideHeights();

  // リサイズ時に再計算（debounce）
  var resizeTimer;
  $(window).on('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(equalizeSlideHeights, 200);
  });
});

画像読み込み後に高さを再計算する

$(function () {
  // 全ての画像が読み込まれてから高さを揃える
  $(window).on('load', function () {
    equalizeSlideHeights();
  });

  // DOMContentLoaded時点でも一度実行（画像なしスライドの即時対応）
  equalizeSlideHeights();
});

matchHeight.jsを使った実装

jquery.matchHeight.jsは画像読み込み・レスポンシブ・複数グループに自動対応します。詳しくはmatchHeight.jsの完全ガイドも参照してください。

$(function () {
  // インストール後、セレクターを指定するだけ
  $('.slide').matchHeight();

  // グループ別に管理
  $('.slide .card-title').matchHeight();
  $('.slide .card-body').matchHeight();
});

slick.jsのadaptiveHeightを使う

$(function () {
  $('#slider').slick({
    adaptiveHeight: true, // アクティブスライドの高さに合わせてスライダーが変化
    // 全スライドを同じ高さにしたい場合は false（デフォルト）
  });
});

CSSのflexboxで高さを揃える（jQuery不要）

.slider {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
}
.slide .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.slide .card-body {
  flex: 1;
}

まとめ

スライドの高さ揃えのポイントをまとめます。

• jQuery自作: height(“auto”)でリセット → outerHeight()で最大値 → .height(maxH)
• 画像対応: $(window).on(“load”)内で実行
• matchHeight.js: グループ・画像・レスポンシブを自動管理
• slick: adaptiveHeight=false（デフォルト）で最大高さに自動揃え
• CSS flexbox: align-items:stretchでJSなしで揃えられる

関連記事: matchHeight.jsで要素の高さを揃える完全ガイド / 要素の幅・高さを取得する完全ガイド

よくある質問（FAQ）