【slick】ナビメニューをクリックでスライダーを動かす【連動】

記事内に広告を含みます

パソ君

・ナビメニューをクリックしたらスライダーが動く実装できる？

こんな疑問にお答えします。

スライダーとは別にナビメニューを作成して、そのナビをクリックしたらスライドさせたいときありますよね。

実はそれ実装可能です。

しかも簡単にできちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「ナビメニューをクリックでスライダーを動かす方法」について解説していきます！

この記事でわかること

ナビメニューをクリックでスライダーを動かす方法

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【slick】ナビメニューをクリックでスライダーを動かす方法【コピペOK】
【slick】ナビメニューをクリックでスライダーを動かす方法【色を変えてみる】
【slick】ナビメニューをクリックでスライダーを動かす方法【コピペOK】：まとめ

【slick】ナビメニューをクリックでスライダーを動かす方法【コピペOK】

そんなナビメニューをクリックしたら、スライダーが動くサンプルがこちら↓

See the Pen slick矢印➁ by jito-coder (@jito-coder) on CodePen.

「1枚目」「2枚目」～のナビをクリックすると、それに応じてスライドされますよね。

コードがこちら↓

<div class="test__container">
    <ul class="test-nav">
        <li class="test-nav__btn">1枚目</li>
        <li class="test-nav__btn">2枚目</li>
        <li class="test-nav__btn">3枚目</li>
        <li class="test-nav__btn">4枚目</li>
    </ul>
    <div class="test-slick">
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
    </div>
</div>

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        arrows: false,
        dots: true,
    });
});


$(function () {
    $('.test-nav__btn').on('click', function () {
        index = $(this).index();
        $('.test-slick').slick('slickGoTo',index,false );
    });
});

コードの重要な点がこちら↓

ナビメニューとスライダ用のHTMLタグを作成
通常通りslick用のjQueryを記述
ナビメニューをクリックしたら～のイベントを記述

順に見ていきましょう。

➀：ナビメニューとスライダ用のHTMLタグを作成

まずナビメニュー用のHTMLと、スライダー用のHTMLを作成しましょう。

<div class="test__container">
    <!-- ナビメニュー -->
    <ul class="test-nav">
        <li class="test-nav__btn">1枚目</li>
        <li class="test-nav__btn">2枚目</li>
        <li class="test-nav__btn">3枚目</li>
        <li class="test-nav__btn">4枚目</li>
    </ul>
    <!-- ナビメニュー ここまで -->
    <!-- スライダー -->
    <div class="test-slick">
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
        <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
    </div>
    <!-- スライダー ここまで -->
</div>

今回は上記のように作成しました。

➁：通常通りslick用のjQueryを記述

続いていつも通り、slick用のコードを記述します。

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        arrows: false,
        dots: true,
    });
});

ここは案件ごとにカスタマイズしましょう。

➂：ナビメニューをクリックしたら～のイベントを記述

あとはナビメニューをクリックしたら、それに応じてスライドさせるイベントをjQueryで記述すればOKです。

それがこちら↓

$(function () {
    $('.test-nav__btn').on('click', function () {
        index = $(this).index();
        $('.test-slick').slick('slickGoTo',index,false );
    });
});

クリックしたら～

下記はそのままですね。ナビメニューをクリックしたら～となります。

$(function () {
    $('.test-nav__btn').on('click', function () {

    });
});

インデックス番号を取得

下記でインデックス番号を取得します。

index = $(this).index();

押したナビメニューのインデックス番号です。番号は0から始まります。

今回でいうとこうですね↓

「1枚目」「2枚目」「3枚目」「4枚目」⇒「0」「1」「2」「3」

つまり「3枚目」と書かれたボタンをクリックしたら、「2」というインデックス番号を取得するということ。

インデックス番号と同じスライド番号に動かす

先ほど取得したインデックス番号と、同じスライドのインデックス番号に動かすという実装が下記になります。

$('.test-slick').slick('slickGoTo',index,false );

つまり「2」のインデックス番号がクリックされたら、
3枚目のスライド（インデックス番号は２）に動かすということ。

これでナビメニューをクリックしたらスライドさせる実装ができました。

【slick】ナビメニューをクリックでスライダーを動かす方法【色を変えてみる】

クリックしたナビメニュー要素に対して、色を変えたい場合もありますよね。

そんなサンプルがこちら↓

See the Pen slickナビ➁ by jito-coder (@jito-coder) on CodePen.

コードの中で変更した点がこちら↓

<ul class="test-nav">
    <li class="test-nav__btn current">1枚目</li>
    <li class="test-nav__btn">2枚目</li>
    <li class="test-nav__btn">3枚目</li>
    <li class="test-nav__btn">4枚目</li>
</ul>

.test-nav__btn.current {
    background-color: orange;
}

$(function () {
    $('.test-nav__btn').on('click', function () {
        $(".test-nav__btn.current").removeClass("current");
        $(this).addClass("current");
        index = $(this).index();
        $('.test-slick').slick('slickGoTo',index,false );
    });
});

クリックしたら「current」をつけるという実装をし、それに対してCSSで装飾すれば実装できちゃいます。