Written by Kasumi

【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でクリックしたら任意のスライダー要素にスライドさせる方法について紹介しました。

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

目次

関連記事

slick

【簡単】slickスライダーに画像が徐々に拡大されるズーム機能を導入しよう

更新日:2022.11.25
722
slick

【簡単】slickを使って次のスライドをチラ見せさせる方法【CSS・jQuery】

更新日:2022.11.25
2189
slick

【おすすめスライダー】slickslider(スリックスライダー)を使って色々なスライダーを作ってみました。

更新日:2022.11.25
759
slick

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

更新日:2022.11.25
1025