Slick Sliderで特定のスライドを非表示にする方法

はじめに

Slick Sliderを使用していると、特定のスライドを非表示にしたい場面が出てくることがあります。この記事では、CSSを使った方法と、JavaScript（slickFilter メソッド）を利用して特定のスライドを非表示にする方法を紹介します。

CSSで特定のスライドを非表示にする

手順1

Slick Sliderでは各スライドに data-slick-index 属性が自動的に付与されます。この属性を利用して、特定のスライドをCSSで簡単に非表示にすることができます。たとえば、インデックスが2のスライドを非表示にする場合は、以下のようにCSSを追加します。

[data-slick-index="2"] {
    display: none;
}

このCSSをHTMLファイルの <style> セクションに追加するか、外部CSSファイルに記述してください。

ただし、CSSだけでスライドを非表示にすると、Slick Sliderの挙動が不安定になる場合があります。この場合、次に紹介する slickFilter メソッドを使用すると、よりスムーズにスライダーを調整できます。

JavaScriptで特定のスライドを非表示にする（slickFilter メソッド）

手順1

以下はSlick Sliderの初期化コードの例です。

$('Slick Sliderクラス名').slick({
  arrows: true,
  slidesToShow: 4,
  slidesToScroll: 4,
  dots: true
});

手順2

このコードの下に、特定のスライドをフィルタリングするための slickFilter を追加します。たとえば、インデックスが5, 6, 7のスライドを非表示にする場合は、次のように記述します。

// slick初期化後にフィルターを適用
$('Slick Sliderクラス名').slick('slickFilter', function(index) {
  return index !== 5 && index !== 6 && index !== 7;
});

このコードをSlick Sliderの初期化設定の直後に追加することで、指定されたインデックスのスライドを非表示にできます。JavaScriptで管理することで、スライダーの動作も安定します。

まとめ

今回は、Slick Sliderで特定のスライドを非表示にする方法について、CSSとJavaScriptの両方を紹介しました。CSSを使う方法はシンプルですが、場合によってはスライダーの動作が不安定になる可能性があります。そのため、よりスムーズに非表示処理を行いたい場合は、slickFilter を使ったJavaScriptによるフィルタリングをおすすめします。

どちらの方法も簡単に実装できるので、状況に応じて使い分けてみてください。