Slickの調整テクニック集｜余白（隙間）・チラ見せ・高さ揃え・崩れ対策

Slick（slick.js）は手軽に導入できる一方で、CSSや表示タイミングの影響を受けやすく、「隙間ができる」「タブの中で崩れる」などのつまずきが起きがちです。

この記事では、よくある症状ごとに“原因→解決”をセットでまとめました。該当する項目からどうぞ。

見た目調整（カスタム）

スライドに余白（隙間）をつける

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

症状：スライド同士の間隔を空けたい（カードUIっぽくしたい）。
よくある原因：margin だけで調整すると端がズレたり、レスポンシブで崩れやすい。

解決：padding＋slick-listにネガティブmargin（定番で安定）

/* スライド同士の隙間（例：左右10px） */
.your-slider .slick-slide { padding: 0 10px; }
.your-slider .slick-list { margin: 0 -10px; }

うまくいかない時のチェック

• スライド内の要素が width:100% で、さらに左右paddingが乗ってはみ出していないか
• .slick-slide に別CSSで margin が入っていないか
• クリック領域がズレる場合は、スライド内のリンクやボタンの配置（position等）も確認

次/前の画像をチラ見せ（はみ出し表示）

現在のスライドの左右に、次/前のスライドを少しだけ見せたい。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

解決

.slick-listにpaddingを指定します。
次の画像をチラ見せしたい場合は、右側にpadding、前の画像をチラ見せ差世帯場合は、左側にpaddingを指定します。
どのくらいチラ見せさせたいかは％の値を変えてお試しください。

.your-slider .slick-list { 
  padding: 0 30% 0 0 !important; // 次の画像をチラ見せしたい時
  padding: 0 0 0 30% !important; // 前の画像をチラ見せしたい時
}

▶ 詳しくはこちら：既存記事で手順・見た目例込みで解説しています

不具合解消（よくある詰まり）

slickの下に謎の隙間がある

症状：スライダーの下に、数px〜の余白（謎の隙間）が出る。
よくある原因（多い順）

• img がインライン要素扱いで、ベースライン分の余白が出ている
• 親要素の line-height が影響している
• スライド内要素に margin-bottom が残っている

解決：まずは画像をブロック化

.your-slider img { display: block; }

まだ残る場合の追加策

画像の親クラスにfont-size:0 line-hegiht:0などを指定する

.your-slider .your-slider-img { 
  font-size:0;
  line-height:0;
}

注意点

• font-size:0line-height:0などを指定する時は、slick内にテキストがあるときは、影響をあたないように気を付けましょう。

タブ切り替え内に入れたら崩れる（複数slick含む）

症状：タブ内のslickが横幅おかしい／ズレる／1枚が極端に細い、など。
よくある原因：タブが非表示（display:none）の間に初期化すると、Slickが幅を正しく計算できないことがある。

タブで崩れるslickと崩れないslickのサンプルを二つ用意しました。

https://sample.web-create-kokusyo.com/sample19/index1.html

https://sample.web-create-kokusyo.com/sample19/index2.html

解決A：タブ表示後に setPosition()（最短）

// 表示されたタブ内のslick全部を再計算 
$(target).find('.your-slider').slick('setPosition'); });

Slickは初期化時に、

• トラックの幅
• スライドの幅
• translate位置

などを計算して配置します。

タブの中身が display:none の間は、ブラウザは要素のサイズをレイアウトしないため、Slickは正しい幅が取れません。
その結果「幅0前提」などのズレた状態で計算され、表示したあとも崩れが残ります。

そこで、タブを表示した直後に slick('setPosition') を呼ぶと、Slickが現在の表示状態のサイズで再計算して並び直すので、崩れが解消されます

タブ切り替え後にslick('setPosition')を行うサンプルはこちら。

// タブ切り替えのクラストコンテンツは各々のクラス名を入れてください。
const $tabs = $('.tab__button');
const $contents = $('.tab-content__item');

$tabs.each(function (index) {
  $(this).on('click', function () {
    $tabs.removeClass('is-active');
    $contents.removeClass('is-active');

    $(this).addClass('is-active');
    const $active = $contents.eq(index).addClass('is-active');

    // 保険：環境によっては切替後に再計算が必要になることがある
    $active.find('.js-blog').slick('setPosition');
  });
});

画像・高さ調整

画像の高さを揃える

症状：画像サイズがバラバラで、スライドの高さがガタつく。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

それぞれ違う比率の画像を揃えます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

解決1：高さ固定＋object-fit: cover;

.your-slider .slide-img { 
  width: 100%; 
  height: 220px; /* 任意の高さ */ 
  object-fit: cover; 
  display: block; 
}

解決2：比率で揃える（最近はこれが便利）

.slide-img img { 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  object-fit: cover; 
  object-position: center;
}

解決3：flexで揃える

.slick-track を display:flex にすると、各 .slick-slide が同じ行のflexアイテムになり、もっとも高い画像の高さに合わせます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

.your-slider .slick-track{
  display: flex;
}

.your-slider .slick-slide {
  height: auto;          /* slickの固定heightを解除 */
  display: flex;         /* 中身を伸ばすため */
}

.your-slider .slick-slide .slide-img {
  display: block;
  width: 100%;
  height: 100%;
}

.your-slider .slick-slide .slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

応用

サムネイル付きスライダーを作る

メインスライダーとサムネイル（ナビ）を連動させたい場合は、Slickの asNavFor が定番です。

サンプル

$('.slider-main').slick({
  slidesToShow: 1,
  arrows: true,
  dots: false,
  asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
  slidesToShow: 5,
  arrows: false,
  dots: false,
  focusOnSelect: true,
  asNavFor: '.slider-main'
});

▶ 詳しくはこちら：既存記事でHTML/CSS/実装手順までまとめています