【Keen Slider】ナビメニューを押すと指定のスライドへ飛ぶようにする方法

こんにちは！のせっち@nosecchi01です。

Keen Sliderを使って、ナビメニューを押したら所定のindex番目へ飛ばすスライダーの実装方法を紹介します。

実際に見てみる

実際に見て、触ってみてもらった方が早いので、下記を開いてください。

codesandoxで確認する

ナビをクリックすると、同じ番号(index)のスライドへ飛ぶことが確認できます。

コード解説

javascript部分を解説していきます。
肝となる部分はこちらです。

function moveToIndex(slider) {
  const navLists = Array.from(document.querySelectorAll(".nav__list-item"));
  navLists.forEach((li) => {
    li.addEventListener("click", (e) => {
      const index = navLists.findIndex((list) => list === e.target);
      slider.moveToIdx(index);
    });
  });
}

Keen Sliderは、第三引数に関数を指定して、様々なカスタマイズを行うことができます。
上記のコードがindex番目に飛ばす関数になります。

分解してみる

分解して見ていきましょう。

function moveToIndex(slider) {
  const navLists = Array.from(document.querySelectorAll(".nav__list-item"));
  navLists.forEach((li) => {
    li.addEventListener("click", (e) => {
      const index = navLists.findIndex((list) => list === e.target);
      console.log(index); // console.logしてみる
    });
  });
}

.nav__list-itemを取得して、forEachで回します。
次に、findIndexでクリックした要素のindex番号を探します。

ここで試しに、console.log(index)としてみてください。
クリックした要素のindex番目が取得できるはずです。

ここまでで、ナビ(<li>）の何番目をクリックしたか、がわかります。

後は、そのindex番号目に飛ばすだけです。

 slider.moveToIdx(index);

Keen SliderにはmoveToIdxというファンクションが用意されています。
第一引数にindexを取るので、先ほど取得したconst indexを代入しています。

これで、指定番目のスライドに飛ばすことができます！

おまけ：Slickでの方法も解説しています。

同じことをslickで行う方法も解説していますのでSlickを使いたい方はこちらをどうぞ！

【Slick】ナビメニューを押すと指定のスライドへ飛ぶようにする方法

こんにちは！のせっちです。 今回は、Slickを使って、【ボタンを押して指定のスライドへ飛ばす】方法を解説しま…

flex-box.net

まとめ

• Keen Sliderで指定番目へ飛ばすには、
  • findIndexでクリックした要素のindexを取得する
  • moveToIdxファンクションを使って、index番目へ移動させる。