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
5998
slick

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

更新日:2022.11.25
4384
slick

slickのcentermodeで、真ん中のスライダー要素の挙動がおかしい時の対処方法

更新日:2022.11.25
2390
slick

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

更新日:2022.11.25
4967