• slick

【slick】クリックしたら任意のスライダー要素にスライドさせる方法

クリック要素のあるボタンを押したら、任意のslickスライダー要素にスライドさせたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
クリックしたら任意のスライダー要素にスライドさせる by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スライダーの上部にあるボタンをクリック。

任意のスライダー要素にスライドされてる事がわかります。

実装方法は以下の通りです。

任意のスライダー要素にスライド

$('クリック要素').click(function(){
  $('slickスライダー要素').slick('slickGoTo',スライドさせたい番号,false );
});

クリックしたら任意のスライダー要素にスライドさせるコード例です。

クリック関数を定義

$('クリック要素').click(function(){
　//実行処理
});

まず最初にクリック関数を定義します。

slickGoTOメソッドを使う

$('slickスライダー要素').slick('slickGoTo',スライドさせたい番号,false );

クリック関数内に実行処理を記述します。

セレクタにslickスライダー要素を指定。

slickGoTOメソッドを定義。

slickメソッドの第一引数にslickGoToを指定。

第二引数にスライドさせたいスライダー要素の番号を指定。
スライド要素には0から順番でインデックス番号が振られてます。

以上で実装完了です。

まとめ

slickでクリックしたら任意のスライダー要素にスライドさせる方法について紹介しました。

以上で解説を終わります。