![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
・ナビメニューをクリックしたらスライダーが動く実装できる?
こんな疑問にお答えします。
スライダーとは別にナビメニューを作成して、そのナビをクリックしたらスライドさせたいときありますよね。
実はそれ実装可能です。
しかも簡単にできちゃいます。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
すぐにできるよ!
ということで、この記事では「ナビメニューをクリックでスライダーを動かす方法」について解説していきます!
ナビメニューをクリックでスライダーを動かす方法
![](https://jito-site.com/wp-content/uploads/2023/01/f386510f79db6e55890aab5cd5f929ea-160x160.png)
目次
【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を作成しましょう。
<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用のコードを記述します。
$(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」
![](https://jito-site.com/wp-content/uploads/2023/06/2b5514d75b8bd77c71a21a6498b98f29.png)
つまり「3枚目」と書かれたボタンをクリックしたら、「2」というインデックス番号を取得するということ。
先ほど取得したインデックス番号と、同じスライドのインデックス番号に動かすという実装が下記になります。
$('.test-slick').slick('slickGoTo',index,false );
つまり「2」のインデックス番号がクリックされたら、
3枚目のスライド(インデックス番号は2)に動かすということ。
これでナビメニューをクリックしたらスライドさせる実装ができました。
【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で装飾すれば実装できちゃいます。
【slick】ナビメニューをクリックでスライダーを動かす方法【コピペOK】:まとめ
- ナビメニューとスライダ用のHTMLタグを作成
- 通常通りslick用のjQueryを記述
- ナビメニューをクリックしたら~のイベントを記述
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ナビメニューとスライダーを連動させたい場合試してみてね!
![](https://jito-site.com/wp-content/uploads/2023/06/c49a34cae557e2e3f37825d2c8094dac-160x160.png)
![](https://jito-site.com/wp-content/uploads/2023/06/b93d3542fadd7bbb24bab10a4dbf4d98-160x160.png)