対象: Slick(既存のSlick実装での対応を想定)
難易度: ★★☆
所要時間: 約5分
Slick(Slick Carousel)は2017年のバージョン1.8.1を最後に長らく開発が止まっていましたが、2026年7月にバージョン2.0がリリースされ、開発が再開されました。v2.0では最新のjQuery 4への対応やフォーカス制御・センターモード周りのバグ修正が行われていますが、jQueryへの依存は変わらず必須です。jQuery不要で今も活発に開発が続いている「Swiper.js」も選択肢として広く使われているので、新規実装の際はSwiper.jsでスライドを実装する記事とあわせて比較検討することをおすすめします。本記事は、すでにSlickで組まれている既存サイトの改修で高さ崩れに対応する場合を想定した内容です。
Slickでスライダーを組んだ時、投稿ごとに文章量や画像サイズが違うと、スライドごとに高さがバラバラになってガタガタして見えることがあります。この高さ崩れの直し方を紹介します。
CSSでの応急処置には限界がある
スライド自体にheight: 300px;のように固定の高さを指定するだけでは、Slickが内部的にスライドの表示位置をJavaScriptで計算して配置し直しているため、期待通りに揃わないことがあります。CSSだけでの解決は難しく、Slick自身の設定オプションを使うのが確実です。
adaptiveHeightオプションを確認する
まず確認したいのがadaptiveHeightオプションです。これがtrueになっていると、逆に「表示中のスライドの高さに応じて全体の高さが変わる」動きになり、高さがガタつく原因になります。高さを固定で揃えたい場合はfalseにします。
$('.slider').slick({
slidesToShow: 3,
adaptiveHeight: false,
});それでも揃わない場合: 初期化後にJavaScriptで揃える
オプションだけで解決しない場合、Slickの初期化が完了した後のタイミングで、各スライドの高さを比較して一番高いものに揃える、という力技のJavaScriptを追加します。
$('.slider').on('init', function() {
let maxHeight = 0;
$('.slider .slick-slide').each(function() {
if ($(this).outerHeight() > maxHeight) {
maxHeight = $(this).outerHeight();
}
});
$('.slider .slick-slide').css('height', maxHeight + 'px');
});initイベントは、Slickの初期化(スライドの複製・配置)が完了した直後に発火します。このタイミングでなければ、まだスライドの実際の高さを正しく取得できないため、必ずinitイベント内で処理する必要があります。
まとめ
- Slickは2026年7月にv2.0がリリースされ開発が再開されたが、jQuery依存は変わらないため、新規実装ではSwiper.jsも比較検討する価値がある
- 既存のSlick実装での対応は、まず
adaptiveHeight: falseを確認する - それでも揃わない場合は
initイベント内で、一番高いスライドに合わせて高さを揃える