Weblasts

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

slickのメソッドをサンプル付きでまとめた記事

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』メソッドは、現在のスライドのインデックス番号を返すメソッドです。パラメータは用意されていません。

slickCurrentSlide SAMPLE
index表示

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

『slickGoTo』メソッド

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

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

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

slickGoTo SAMPLE
index2に移動

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

『slickPrev』/『slickNext』メソッド

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

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

slickPrev/slickNext SAMPLE
PREV
NEXT

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

『slickPlay』/『slickPause』メソッド

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

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

slickPlay/slickPause SAMPLE
START
STOP

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

『slickAdd』メソッド

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

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

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

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

slickAdd SAMPLE
追加

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

『slickRemove』メソッド

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

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

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

slickAdd SAMPLE
削除

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

『slickFilter』/『slickUnfilter』メソッド

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

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

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

slickPlay/slickUnfilter SAMPLE
フィルタ
解除

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

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

『slickGetOption』メソッド

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

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

slickGetOption SAMPLE
オプション取得

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

『slickSetOption』メソッド

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

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

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

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

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

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

slickGetOption SAMPLE
オプション変更

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

『unslick』メソッド

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

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

unslick SAMPLE
解除

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

『getSlick』メソッド

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

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

getSlick SAMPLE
取得

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

POPULAR