『slick』のメソッドをすべてサンプル付きでまとめてみました

JavaScript2021.04.05

slickのメソッドをすべてサンプル付きで紹介しています。
全て動くようになっているので重いかもしれませんがよろしくお願いします。

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『sl・・・。

『slick』のイベントをサンプル付きで細かくまとめました

以前の記事でオプションを大量に紹介したのでこちらの記事ではイベントを紹介していきます。簡単なサンプル付きにしていきますので少し重いかもしれ・・・。

この記事の目次

slickのメソッド一覧

slickのメソッド一覧

メソッドを書く時の基本的な書式は以下の通りで、パラメータとして扱います。

$('スライダー').slick('メソッド');

1	$('スライダー').slick('メソッド');

メソッド名以外のパラメータが用意されているときは「,」区切りで並べて指定します

$('スライダー').slick('メソッド','パラメータ','パラメータ');

1	$('スライダー').slick('メソッド','パラメータ','パラメータ');

使えるメソッドは表にまとめましたのでご確認ください

メソッド名	使えるパラメータ	メソッドの説明
slickCurrentSlide		現在のスライドのindex番号を返す
slickGoTo	index, dontAnimate	indexで指定した番号のスライドに切り替える
slickNext		次のスライドへ切り替える
slickPrev		前のスライドへ切り替える
slickPause		autoplayをストップ
slickPlay		autoplayをスタート
slickAdd	element, index, addBefore	スライドを追加
slickRemove	index, removeBefore	指定したスライドを削除
slickFilter	filter	jQueryのfilter()を使用してスライドをフィルタリング
slickUnfilter		slickFilterのフィルタリングを解除
slickGetOption	option	指定したオプションの値を取得
slickSetOption	option, value, refresh	指定したオプションの値を変更
unslick		slickを解除
getSlick		slickの情報を取得

『slickCurrentSlide』メソッド

『slickCurrentSlide』メソッドは、現在のスライドのインデックス番号を返すメソッドです。パラメータは用意されていません。

$('スライダー').slick('slickCurrentSlide');

1	$('スライダー').slick('slickCurrentSlide');

slickCurrentSlide SAMPLE

①

②

③

index表示

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">index表示</div>
<div class="text"></div>

</div>

<div class="btn">index表示</div>

index表示をクリックしたら表示中スライドのindexを変数に格納し、表示するようにしています

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      var num = $slider.slick('slickCurrentSlide');
      $('.text').text('現在のスライドは' + num + 'です');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

var num = $slider.slick('slickCurrentSlide');

$('.text').text('現在のスライドは' + num + 'です');

});

</script>

『slickGoTo』メソッド

『slickGoTo』メソッドは、指定したindex番号のスライドに移動させるメソッドです。

$('スライダー').slick('slickGoTo', index, dontAnimate);

1	$('スライダー').slick('slickGoTo', index, dontAnimate);

2つ目のパラメータ（index）には数値で移動したいスライドのindex番号を指定します

3つ目のパラメータ（dontAnimate）にはアニメーション無しで移動させるかを「true」か「false」で指定します
true：アニメーション無し
false：アニメーション付き

slickGoTo SAMPLE

①

②

③

index2に移動

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">index2に移動</div>

</div>

<div class="btn">index2に移動</div>

index2に移動をクリックしたらアニメーション付きで移動するようにしています。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      $slider.slick('slickGoTo',2,false );
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

$slider.slick('slickGoTo',2,false );

});

</script>

『slickPrev』/『slickNext』メソッド

『slickPrev』メソッドは、前のスライドへ移動させるメソッド
『slickNext』メソッドは、次のスライドへ移動させるメソッドです。

//slickPrev
$('スライダー').slick('slickPrev');

//slickNext
$('スライダー').slick('slickNext');

//slickPrev

$('スライダー').slick('slickPrev');

//slickNext

$('スライダー').slick('slickNext');

追加のパラメータは用意されていません

slickPrev/slickNext SAMPLE

①

②

③

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="buttons">
  <div class="prev">PREV</div>
  <div class="next">NEXT</div>
</div>

</div>

</div>

それぞれのボタンにクリックイベントを設定しています。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.prev').on('click', function() {
      $slider.slick('slickPrev');
    });
    $('.next').on('click', function() {
      $slider.slick('slickNext');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.prev').on('click', function() {

$slider.slick('slickPrev');

});

$('.next').on('click', function() {

$slider.slick('slickNext');

});

</script>

『slickPlay』/『slickPause』メソッド

『slickPlay』メソッドは、自動再生を開始させるメソッド
『slickPause』メソッドは、自動再生を停止させるメソッドです。

//slickPlay
$('スライダー').slick('slickPlay');

//slickPause
$('スライダー').slick('slickPause');

//slickPlay

$('スライダー').slick('slickPlay');

//slickPause

$('スライダー').slick('slickPause');

追加のパラメータは用意されていません

slickPlay/slickPause SAMPLE

①

②

③

START

STOP

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="buttons">
  <div class="start">START</div>
  <div class="stop">STOP</div>
</div>

</div>

<div class="start">START</div>

</div>

それぞれのボタンにクリックイベントを設定しています。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick({
      autoplaySpeed:1000
    });
    $('.start').on('click', function() {
      $slider.slick('slickPlay');
    });
    $('.stop').on('click', function() {
      $slider.slick('slickPause');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick({

autoplaySpeed:1000

});

$('.start').on('click', function() {

$slider.slick('slickPlay');

});

$('.stop').on('click', function() {

$slider.slick('slickPause');

});

</script>

『slickAdd』メソッド

『slickAdd』メソッドは、スライダーにスライドを追加するメソッドです。

$('スライダー').slick('slickAdd', element, index, addBefore);

1	$('スライダー').slick('slickAdd', element, index, addBefore);

2つ目のパラメータ（element）にはスライドのHTMLを入れます

3つ目のパラメータ（index）どこに追加するかをindex番号で指定します

4つ目のパラメータ（addBefore）は指定したindex番号の前に追加するか、後ろに追加するかを「true」と「false」で指定します。
true：前に追加
false：後ろに追加

slickAdd SAMPLE

①

②

③

追加

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">追加</div>

</div>

追加をクリックしたらindex番号で1番目の前にスライドを追加しています。
※ クリックした回数追加されます

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      $slider.slick('slickAdd','<div class="slider_item">追加</div>',1,true);
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

$slider.slick('slickAdd','<div class="slider_item">追加</div>',1,true);

});

</script>

『slickRemove』メソッド

『slickRemove』メソッドは、スライダーから指定したスライドを削除するメソッドです。

$('スライダー').slick('slickRemove', index, removeBefore);

1	$('スライダー').slick('slickRemove', index, removeBefore);

2つ目のパラメータ（index）どれを削除するかをindex番号で指定します。※指定されていない場合は、先頭のスライド削除します

3つ目のパラメータ（removeBefore）は指定したindex番号の前を削除するかどうかの設定で「true」と「false」で指定します。
true：指定したindex番号の前を削除
指定したindex番号を削除

slickAdd SAMPLE

①

②

③

削除

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">削除</div>

</div>

削除をクリックしたらindex番号で2番目の前にスライドを削除しています。

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      $slider.slick('slickRemove', 2, false);
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

$slider.slick('slickRemove', 2, false);

});

</script>

『slickFilter』/『slickUnfilter』メソッド

『slickFilter』メソッドは、jQueryのfilter構文を使ってフィルタリングできるメソッド
『slickUnfilter』メソッドは、フィルタリングを解除できるメソッドです。

//slickPlay
$('スライダー').slick('slickFilter',filter);

//slickPause
$('スライダー').slick('slickUnfilter');

//slickPlay

$('スライダー').slick('slickFilter',filter);

//slickPause

$('スライダー').slick('slickUnfilter');

『slickFilter』メソッドは2つ目のパラメータにフィルタリングの条件を文字列として入れます
クラス属性での絞り込みや「:odd」「:even」等でも絞り込み可能

『slickUnfilter』メソッドは追加のパラメータは用意されていません

slickPlay/slickUnfilter SAMPLE

①

②

③

④

⑤

⑥

フィルタ

解除

<div class="slider">
  <div class="slider_item filter">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item filter">③</div>
  <div class="slider_item">④</div>
  <div class="slider_item">⑤</div>
  <div class="slider_item filter">⑥</div>
</div>
<div class="buttons">
  <div class="filter">フィルタ</div>
  <div class="unfilter">解除</div>
</div>

</div>

</div>

それぞれのボタンにクリックイベントを設定しています。フィルタリングするとクラスfilterが付与されている要素だけが表示されるはずです

解除ボタンをクリックするとフィルタイングは解除されます

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.filter').on('click', function() {
      $slider.slick('slickFilter', '.filter');
    });
    $('.unfilter').on('click', function() {
      $slider.slick('slickUnfilter');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.filter').on('click', function() {

$slider.slick('slickFilter', '.filter');

});

$('.unfilter').on('click', function() {

$slider.slick('slickUnfilter');

});

</script>

『slickGetOption』メソッド

『slickGetOption』メソッドは、スライダーに設定されているオプションを取得するメソッドです。

$('スライダー').slick('slickGetOption', option);

1	$('スライダー').slick('slickGetOption', option);

2つ目のパラメータ（option）には取得したいオプションを入れます

slickGetOption SAMPLE

①

②

③

オプション取得

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">オプション取得</div>
<div class="text"></div>

</div>

<div class="btn">オプション取得</div>

オプション取得をクリックしたらオプションを取得して変数に入れて.textに表示していきます

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      var option = $slider.slick('slickGetOption', 'autoplay');
      $('.text').text('autoplayは'+option+'です。');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

var option = $slider.slick('slickGetOption', 'autoplay');

$('.text').text('autoplayは'+option+'です。');

});

</script>

『slickSetOption』メソッド

『slickSetOption』メソッドは、指定したスライダーの指定したオプションの値を変更します

$('スライダー').slick('slickSetOption', option, value, refresh);

1	$('スライダー').slick('slickSetOption', option, value, refresh);

2つ目のパラメータ（option）には変更したいオプションを入れます

3つ目のパラメータ（value）には変更したいオプションの値を入れます

4つ目のパラメータ（refresh）UIを更新するかどうかを「true」か「false」で指定します
true：更新する
false：更新しない

複数オプションを変更する場合は少し書式が変わります。

$('スライダー').slick('slickSetOption', {
  option:value,
  option:value,
  option:value
}, refresh);

$('スライダー').slick('slickSetOption', {

option:value,

option:value

}, refresh);

2つ目のパラメータは{}の中に変更したいオプションと値をセットで入れます

slickGetOption SAMPLE

①

②

③

オプション変更

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">オプション変更</div>

</div>

<div class="btn">オプション変更</div>

オプション変更をクリックしたらオプションを変更してスライドを2枚表示しつつ自動再生にしています

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      $slider.slick('slickSetOption', {
          autoplay: true,
          slidesToShow: 2
      }, true);
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

$slider.slick('slickSetOption', {

autoplay: true,

slidesToShow: 2

}, true);

});

</script>

『unslick』メソッド

『unslick』メソッドは、指定したスライダーを解除します

$('スライダー').slick('unslick');

1	$('スライダー').slick('unslick');

追加できるパラメータはありません

unslick SAMPLE

①

②

③

解除

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">解除</div>

</div>

解除をクリックしたらslickを解除しています

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      $slider.slick('unslick');
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

$slider.slick('unslick');

});

</script>

『getSlick』メソッド

『getSlick』メソッドは、指定したスライダーの情報をオブジェクト形式で取得します

$('スライダー').slick('getSlick');

1	$('スライダー').slick('getSlick');

追加できるパラメータはありません

getSlick SAMPLE

①

②

③

取得

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>
<div class="btn">取得</div>
<div class="text"></div>

</div>

取得をクリックしたらslickの情報を取得して出力していますが意味のないものになっています。
使い道が思いつかないのでご自身の環境でconsole.log()で試していただけると良いと思います

<script>
  $(function() {
    var $slider = $('.slider');
    $slider.slick();
    $('.btn').on('click', function() {
      var data = $slider.slick('getSlick');
      $('.text').text(data);
    });
  });
</script>

$(function() {

var $slider = $('.slider');

$slider.slick();

$('.btn').on('click', function() {

var data = $slider.slick('getSlick');

$('.text').text(data);

});

</script>

『slick』のメソッドをすべてサンプル付きでまとめてみました

slickのメソッド一覧

『slickCurrentSlide』メソッド

『slickGoTo』メソッド

『slickPrev』/『slickNext』メソッド

『slickPlay』/『slickPause』メソッド

『slickAdd』メソッド

『slickRemove』メソッド

『slickFilter』/『slickUnfilter』メソッド

『slickGetOption』メソッド

『slickSetOption』メソッド

『unslick』メソッド

『getSlick』メソッド

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

CSSだけでスライドショー

swiper.js（8.1.4）を使ってゆっくり等速で流れる無限ループスライダーを作ってみました

IEにはそろそろ別れを告げたいのでIEのユーザーだけリダイレクトしてみた

slickの矢印ナビをカスタマイズ方法を紹介しようと思う