slick.jsは、初期化時にスライダーのサイズや位置を計算します。しかし、親要素がdisplay: none;の場合、サイズ計算が正常に行われず、スライダーが表示されない、またはレイアウトが崩れるという問題が発生します。
この現象はタブ切替時だけでなく、ポップアップ内にスライダーを配置している場合など、親要素が非表示の状態で初期化される状況すべてに共通する問題です。

本記事では、この問題を解決するための方法を解説します。具体的には、タブ切替時や親要素が表示されたタイミングで、slick('setPosition')メソッドを呼び出して、Slick Sliderにレイアウトの再計算をさせる方法を紹介します。

解決策：slick(‘setPosition’)の利用

タブやポップアップが表示されたタイミングで、Slick Sliderに対してsetPositionメソッドを呼び出すことで、サイズや位置を再計算させ、正しく表示させることができます。以下のコード例は、タブ切替時にこの対処を行う方法を示しています。

コード例

$(document).ready(function () {
  $('.slide').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
  });
  
  // タブ切替時にslickの位置を再計算する
  $('.tabnav > li').click(function () {
    $('.slide').slick('setPosition');
  });
});

コード解説

Slick Sliderの初期化

$('.slide').slick({ ... });

でスライダーを初期化します。初期化時には非表示状態だと正しく計算されないため、後から再計算が必要です。

タブ切替イベント

$('.tabnav > li').click(function () {
  $('.slide').slick('setPosition');
});

タブナビゲーションの各リストアイテムがクリックされた際に、slick('setPosition')を呼び出してスライダーのサイズと位置を再計算します。これにより、非表示状態から表示状態に切り替わったときでも、スライダーが正しくレイアウトされます。

応用：ポップアップ内での利用

この方法は、タブ切替に限らず、親要素がdisplay: none;の状態で初期化された場合に有効です。例えば、ポップアップ内にスライダーがある場合、ポップアップが表示されたタイミングで同様にslick('setPosition')を呼び出すことで、正しい表示を実現できます。

$(document).on('click', '.open-popup', function(){
  // ポップアップ表示後にSlick Sliderの位置を再計算
  $('.slide').slick('setPosition');
});

まとめ

Slick.jsスライダーがタブ切替やポップアップなど、親要素がdisplay: none;の状態で初期化されると、サイズや位置の計算が正しく行われず表示に不具合が発生します。この問題は、タブ切替やポップアップが表示されたタイミングでslick('setPosition')を呼び出すことで解決できます。
主なポイントは以下の通りです。

• 問題の原因: 非表示状態での初期化によるサイズ計算の不具合
• 解決策: タブ切替時やポップアップ表示時にslick('setPosition')を呼び出す
• 応用: 親要素が非表示の場合全般に有効な手法

これらの方法を活用して、スライダーを含むインタラクティブなウェブサイトをより快適に運用してください。