【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番号に飛ばす、という処理をしてあげます。

下記のような感じで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. ナビメニューの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を使えば簡単にナビメニューとスライダーを連動させることができる。