『slick』のメソッドをすべてサンプル付きでまとめてみました
slickのメソッドをすべてサンプル付きで紹介しています。
全て動くようになっているので重いかもしれませんがよろしくお願いします。
この記事の目次
slickのメソッド一覧
メソッドを書く時の基本的な書式は以下の通りで、パラメータとして扱います。
|
1 |
$('スライダー').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』メソッドは、現在のスライドのインデックス番号を返すメソッドです。パラメータは用意されていません。
|
1 |
$('スライダー').slick('slickCurrentSlide'); |
|
1 2 3 4 5 6 7 |
<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> |
index表示をクリックしたら表示中スライドのindexを変数に格納し、表示するようにしています
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { var num = $slider.slick('slickCurrentSlide'); $('.text').text('現在のスライドは' + num + 'です'); }); }); </script> |
『slickGoTo』メソッド
『slickGoTo』メソッドは、指定したindex番号のスライドに移動させるメソッドです。
|
1 |
$('スライダー').slick('slickGoTo', index, dontAnimate); |
2つ目のパラメータ（index）には数値で移動したいスライドのindex番号を指定します
3つ目のパラメータ（dontAnimate）にはアニメーション無しで移動させるかを「true」か「false」で指定します
true：アニメーション無し
false：アニメーション付き
|
1 2 3 4 5 6 |
<div class="slider"> <div class="slider_item">①</div> <div class="slider_item">②</div> <div class="slider_item">③</div> </div> <div class="btn">index2に移動</div> |
index2に移動をクリックしたらアニメーション付きで移動するようにしています。
|
1 2 3 4 5 6 7 8 9 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { $slider.slick('slickGoTo',2,false ); }); }); </script> |
『slickPrev』/『slickNext』メソッド
『slickPrev』メソッドは、前のスライドへ移動させるメソッド
『slickNext』メソッドは、次のスライドへ移動させるメソッドです。
|
1 2 3 4 5 |
//slickPrev $('スライダー').slick('slickPrev'); //slickNext $('スライダー').slick('slickNext'); |
追加のパラメータは用意されていません
|
1 2 3 4 5 6 7 8 9 |
<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> |
それぞれのボタンにクリックイベントを設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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』メソッドは、自動再生を停止させるメソッドです。
|
1 2 3 4 5 |
//slickPlay $('スライダー').slick('slickPlay'); //slickPause $('スライダー').slick('slickPause'); |
追加のパラメータは用意されていません
|
1 2 3 4 5 6 7 8 9 |
<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> |
それぞれのボタンにクリックイベントを設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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』メソッドは、スライダーにスライドを追加するメソッドです。
|
1 |
$('スライダー').slick('slickAdd', element, index, addBefore); |
2つ目のパラメータ（element）にはスライドのHTMLを入れます
3つ目のパラメータ（index）どこに追加するかをindex番号で指定します
4つ目のパラメータ（addBefore）は指定したindex番号の前に追加するか、後ろに追加するかを「true」と「false」で指定します。
true：前に追加
false：後ろに追加
|
1 2 3 4 5 6 |
<div class="slider"> <div class="slider_item">①</div> <div class="slider_item">②</div> <div class="slider_item">③</div> </div> <div class="btn">追加</div> |
追加をクリックしたらindex番号で1番目の前にスライドを追加しています。
※ クリックした回数追加されます
|
1 2 3 4 5 6 7 8 9 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { $slider.slick('slickAdd','<div class="slider_item">追加</div>',1,true); }); }); </script> |
『slickRemove』メソッド
『slickRemove』メソッドは、スライダーから指定したスライドを削除するメソッドです。
|
1 |
$('スライダー').slick('slickRemove', index, removeBefore); |
2つ目のパラメータ（index）どれを削除するかをindex番号で指定します。※指定されていない場合は、先頭のスライド削除します
3つ目のパラメータ（removeBefore）は指定したindex番号の前を削除するかどうかの設定で「true」と「false」で指定します。
true：指定したindex番号の前を削除
指定したindex番号を削除
|
1 2 3 4 5 6 |
<div class="slider"> <div class="slider_item">①</div> <div class="slider_item">②</div> <div class="slider_item">③</div> </div> <div class="btn">削除</div> |
削除をクリックしたらindex番号で2番目の前にスライドを削除しています。
|
1 2 3 4 5 6 7 8 9 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { $slider.slick('slickRemove', 2, false); }); }); </script> |
『slickFilter』/『slickUnfilter』メソッド
『slickFilter』メソッドは、jQueryのfilter構文を使ってフィルタリングできるメソッド
『slickUnfilter』メソッドは、フィルタリングを解除できるメソッドです。
|
1 2 3 4 5 |
//slickPlay $('スライダー').slick('slickFilter',filter); //slickPause $('スライダー').slick('slickUnfilter'); |
『slickFilter』メソッドは2つ目のパラメータにフィルタリングの条件を文字列として入れます
クラス属性での絞り込みや「:odd」「:even」等でも絞り込み可能
『slickUnfilter』メソッドは追加のパラメータは用意されていません
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
それぞれのボタンにクリックイベントを設定しています。フィルタリングするとクラスfilterが付与されている要素だけが表示されるはずです
解除ボタンをクリックするとフィルタイングは解除されます
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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』メソッドは、スライダーに設定されているオプションを取得するメソッドです。
|
1 |
$('スライダー').slick('slickGetOption', option); |
2つ目のパラメータ（option）には取得したいオプションを入れます
|
1 2 3 4 5 6 7 |
<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> |
オプション取得をクリックしたらオプションを取得して変数に入れて.textに表示していきます
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { var option = $slider.slick('slickGetOption', 'autoplay'); $('.text').text('autoplayは'+option+'です。'); }); }); </script> |
『slickSetOption』メソッド
『slickSetOption』メソッドは、指定したスライダーの指定したオプションの値を変更します
|
1 |
$('スライダー').slick('slickSetOption', option, value, refresh); |
2つ目のパラメータ（option）には変更したいオプションを入れます
3つ目のパラメータ（value）には変更したいオプションの値を入れます
4つ目のパラメータ（refresh）UIを更新するかどうかを「true」か「false」で指定します
true：更新する
false：更新しない
複数オプションを変更する場合は少し書式が変わります。
|
1 2 3 4 5 |
$('スライダー').slick('slickSetOption', { option:value, option:value, option:value }, refresh); |
2つ目のパラメータは{}の中に変更したいオプションと値をセットで入れます
|
1 2 3 4 5 6 |
<div class="slider"> <div class="slider_item">①</div> <div class="slider_item">②</div> <div class="slider_item">③</div> </div> <div class="btn">オプション変更</div> |
オプション変更をクリックしたらオプションを変更してスライドを2枚表示しつつ自動再生にしています
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { $slider.slick('slickSetOption', { autoplay: true, slidesToShow: 2 }, true); }); }); </script> |
『unslick』メソッド
『unslick』メソッドは、指定したスライダーを解除します
|
1 |
$('スライダー').slick('unslick'); |
追加できるパラメータはありません
|
1 2 3 4 5 6 |
<div class="slider"> <div class="slider_item">①</div> <div class="slider_item">②</div> <div class="slider_item">③</div> </div> <div class="btn">解除</div> |
解除をクリックしたらslickを解除しています
|
1 2 3 4 5 6 7 8 9 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { $slider.slick('unslick'); }); }); </script> |
『getSlick』メソッド
『getSlick』メソッドは、指定したスライダーの情報をオブジェクト形式で取得します
|
1 |
$('スライダー').slick('getSlick'); |
追加できるパラメータはありません
|
1 2 3 4 5 6 7 |
<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> |
取得をクリックしたらslickの情報を取得して出力していますが意味のないものになっています。
使い道が思いつかないのでご自身の環境でconsole.log()で試していただけると良いと思います
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function() { var $slider = $('.slider'); $slider.slick(); $('.btn').on('click', function() { var data = $slider.slick('getSlick'); $('.text').text(data); }); }); </script> |
