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

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

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

ナビメニューとスライダーを連動させる、、、難しそうに思えますが、案外簡単にできます!
この後実際にコードを見ていただきますが、とても短いコードで実現できます。

それではいってみましょう!

目標物を確認

早速codepenで見ていきます。

See the Pen Slick Sample – Slick Go To by Yuki Nose (@yukinouz1) on CodePen.

「Go To 1」、「Go To 2」などを押すと、該当のスライドに移動します。

解説していきます

まず、ざっくりと仕組みを説明していきます。

slickでスライダーを作ると、.slick-slide クラスにdata-slick-index というindex番号が自動的に付きます。

それをslickGoToというメソッドを利用して、該当のindex番号に飛ばす、という処理をしてあげます。

.slick-slideには自動的にdata-slick-indexが付与される

下記のような感じでslickGoToを使います。

$(document).ready(function(){
  $('.js-slickGoTo').slick();
});

$('.js-navList').on('click', function() {
  $('.js-slickGoTo').slick('slickGoTo', 2, false);
});

この状態で、ナビメニューを押すと、3番目のスライド(indexは0からカウント)に飛びます。

しかし、このままでは何を押しても3番目のスライドに飛んでしまいます。

今の説明でよくわからなかった、という人はSlick – にほんご。を合わせてご参照ください。動くサンプルがセットですので分かりやすいです!

ナビメニューの番号と連動させる

ナビメニュー(Go To 1, Go To 2など)と連動させたいので、下記のようにしていきます。

  1. ナビメニュー.js-navListのindex番号を取得する
  2. SlickGoToメソッドで、同じindex番号のスライドに飛ばす

1. ナビメニューのindex番号を取得する

jQueryには、index()という便利なメソッドがありますのでそちらを使います。

// 解説部分だけ抜粋
let navList = $('.js-navList');

navList.on('click',function(){
  index = $(this).index();
  console.log(index); // 解説用に追加
});

この状態で.js-navListをクリックすると、consoleにindex番号が出ます。

index番号は0から始まります。

2. SlickGoToメソッドで、同じindex番号のスライドに飛ばす

index番号が取得できたので、後はslickGoToで飛ばすだけです。

該当部分の抜粋は下記です。

// optionは省略

const slickGoTo = $('.js-slickGoTo');
let navList = $('.js-navList');

$(slickGoTo).slick(option);

navList.on('click',function(){
  index = $(this).index();
  slickGoTo.slick("slickGoTo", index, false);
});

第三引数のfalseとしているところをtrueにすると、アニメーションしなくなります。

解説は以上です。

お疲れ様でした!

まとめ

slickGoToを使えば簡単にナビメニューとスライダーを連動させることができる。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。