slick.jsのスライダーを同一ページ内に複数設置した際に切り分けたい

slick.js
Slick js 上下の連動表示のスライダーを同一ページ内に複数設置したいのですが、複数設置した場合動きが連動してしまいます。

各々で動かしたい場合のコードの書き方をご享受ください。

〈HTML〉
<section>
    <div class="slider slider-for">
    <div><a href="#"><img src="img/1.png"></a></div>
    <div><a href="#"><img src="img/2.png"></a></div>
    <div><a href="#"><img src="img/3.png"></a></div>
    <div><a href="#"><img src="img/4.png"></a></div>
    <div><a href="#"><img src="img/5.png"></a></div>
  </div>
    <div class="slider slider-nav">
    <div><img src="img/1.png"></div>
    <div><img src="img/2.png"></div>
    <div><img src="img/3.png"></div>
    <div><img src="img/4.png"></div>
    <div><img src="img/5.png"></div>
  </div>
  </section>
<section>
    <div class="slider slider-for">
    <div><a href="#"><img src="img/1.png"></a></div>
    <div><a href="#"><img src="img/2.png"></a></div>
    <div><a href="#"><img src="img/3.png"></a></div>
    <div><a href="#"><img src="img/4.png"></a></div>
    <div><a href="#"><img src="img/5.png"></a></div>
    <div><a href="#"><img src="img/1.png"></a></div>
    <div><a href="#"><img src="img/2.png"></a></div>
    <div><a href="#"><img src="img/3.png"></a></div>
    <div><a href="#"><img src="img/4.png"></a></div>
    <div><a href="#"><img src="img/5.png"></a></div>
  </div>
    <div class="slider slider-nav">
    <div><img src="img/1.png"></div>
    <div><img src="img/2.png"></div>
    <div><img src="img/3.png"></div>
    <div><img src="img/4.png"></div>
    <div><img src="img/5.png"></div>
    <div><img src="img/1.png"></div>
    <div><img src="img/2.png"></div>
    <div><img src="img/3.png"></div>
    <div><img src="img/4.png"></div>
    <div><img src="img/5.png"></div>
  </div>
  </section>

〈js〉
<script>
$(function() {
 $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    autoplay: false,
    autoplaySpeed: 5000,
    speed: 1000
});
});
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

同じClassを利用しているため同時に動くのだと思います。
IDを振るか、別々のClassを指定して、それぞれslick()の設定を記述してください。

例：

html
1<section>
2    <div class="slider slider-for-up">
3     ～～～省略
4  </div>
5    <div class="slider slider-nav-up">
6     ～～～省略
7  </div>
8  </section>
9<section>
10    <div class="slider slider-for-down">
11     ～～～省略
12  </div>
13    <div class="slider slider-nav-down">
14     ～～～省略
15  </div>
16  </section>
17
18<script>
19$(function() {
20 $('.slider-for-up').slick({
21　　～～省略
22    asNavFor: '.slider-nav-up'
23});
24$('.slider-nav-up').slick({
25　　～～省略
26    asNavFor: '.slider-for-up',
27　　～～省略
28});
29 $('.slider-for-down').slick({
30　　～～省略
31    asNavFor: '.slider-nav-down'
32});
33$('.slider-nav-down').slick({
34　　～～省略
35    asNavFor: '.slider-for-down',
36　　～～省略
37});
38});
39</script>
40

投稿2017/08/24 05:21

編集2017/08/24 05:26

m.ts10806

総合スコア80888

niimme

2017/08/25 01:30

ご享受頂いた方法を採用して実装していきたいと思います。今回はありがとうございました。

m.ts10806

2017/08/25 01:32

同じような記述が続くことになりますので、共通化してみたり効率的な書き方にも挑戦してみてください。

niimme

2017/08/25 01:34

はい！分かりました、ありがとうございました。

行動規範の内容に同意します

こんな感じとか。（sectionごとにクラスをつけてしまうパターン）

JavaScript
1$(function() {
2	$('section').each(function(i){
3		$(this).addClass('data-id' + i);
4		$(this).find('.slider-for').slick({
5			slidesToShow: 1,
6			slidesToScroll: 1,
7			arrows: false,
8			fade: true,
9			asNavFor: '.data-id'+i+' .slider-nav'
10		});
11		$(this).find('.slider-nav').slick({
12			slidesToShow: 3,
13			slidesToScroll: 1,
14			asNavFor: '.data-id'+i+' .slider-for',
15			dots: false,
16			centerMode: true,
17			focusOnSelect: true,
18			autoplay: false,
19			autoplaySpeed: 5000,
20			speed: 1000
21		});
22	});
23}); // 未テスト