タブコンテンツ内のslickスライダーが表示されない問題を解決する方法

はじめに

Webサイト制作において、jQueryの人気スライダーライブラリ「slick」は非常に便利なツールです。

スライダーを簡単に実装でき、見た目にも洗練されたUIが実現できます。

しかし、タブ切り替えコンテンツ内にslickスライダーを設置した場合、「スライダーが正しく表示されない」「画像が横並びにならない」などの不具合に遭遇することがあります。

今回は、このようなタブコンテンツ内でslickが正常に表示されない問題の原因と、その具体的な解決方法について解説します。

問題の現象

まずは前提のコードはこんな感じです。

《HTML》

<div class="tab_box">
	<div class="btn_area">
		<div class="tab_btn active">タブ1</div>
		<div class="tab_btn">タブ2</div>
	</div>
	<div class="panel_area">
		<!-- タブコンテンツ1 -->
		<div class="tab_panel active">
			<div class="slider">
				<div><img src="image1.jpg" /></div>
				<div><img src="image2.jpg" /></div>
				<div><img src="image3.jpg" /></div>
			</div>
		</div>
		<!-- タブコンテンツ2 -->
		<div class="tab_panel">
			<div class="slider">
				<div><img src="image1.jpg" /></div>
				<div><img src="image2.jpg" /></div>
				<div><img src="image3.jpg" /></div>
			</div>
		</div>
	</div>
</div>

《CSS》

.tab_box .tab_panel {
    display: none;
}
.tab_box .tab_panel.active {
    display: block;
}

《JS》

$(".slider").slick({});

この時、タブコンテンツ1内のスライダーは問題なく動作しますが、タブ2を開いたとき、スライダーが表示されなかったり、壊れていたりする現象が起きます。

なぜこの問題が起きるのか？

この不具合の原因は、slickが初期化されるタイミングにあります。

slickは、スライダーの要素が表示されている状態で初期化されることを前提に設計されています。

しかし、タブコンテンツ2以降（タブコンテンツ3／タブコンテンツ4・・・）はCSSで display: none によって非表示になっており、slickが隠れた状態の要素に対して初期化されると、スライダーの幅や高さの計算がうまくできません。

その結果、slickが正しく機能しなくなります。

解決方法：タブ切り替え後にslickを再初期化する

解決方法は、「タブが切り替わったタイミングでslickを初期化する」ことです。

以下のように、タブをクリックしたときにslickを再初期化する処理を追加し、JS部分を書き換えます。

《JS》

var slider = $(".slider").slick({});

// タブ切り替え時に、スライドをリセット
$('.tab_box .tab_btn').on("click", function () {
    slider.slick("slickGoTo", 0); // 最初のスライドへ
    slider.slick("setPosition"); // slickの位置を初期化
});

これでタブコンテンツ2内のスライダーも問題なく表示されました。

まとめ

タブコンテンツ内にslickスライダーを設置する場合、表示されていない状態での初期化が原因で表示の不具合が起きやすくなります。

タブを切り替えたタイミングでslickを再初期化することで確実にslickを機能させることができます。

タブコンテンツとslickを組み合わせる際は、こちらの方法をぜひ活用してみてください。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。