[slick]複数のスライドを一つのdotsで制御したいです

前提・実現したいこと

タイトルの通り
複数のスライドショーを一つのdotsをクリックしてスライドを行いたいです。
slider_1のdotsで一括したいです

該当のソースコード

html
1      <div class="slider">
2          <div class="content s_1">1</div>
3          <div class="content s_2">2</div>
4          <div class="content s_3">3</div>
5          <div class="content s_4">4</div>
6          <div class="content s_5">5</div>
7          <div class="content s_6">6</div>
8          <div class="content s_7">7</div>
9          <div class="content s_8">8</div>
10          <div class="content s_9">9</div>
11          <div class="content s_10">10</div>
12          <div class="content s_11">11</div>
13          <div class="content s_12">12</div>
14      </div>
15      <div class="slider_2">
16          <div class="content s_1">1</div>
17          <div class="content s_2">2</div>
18          <div class="content s_3">3</div>
19          <div class="content s_4">4</div>
20          <div class="content s_5">5</div>
21          <div class="content s_6">6</div>
22          <div class="content s_7">7</div>
23          <div class="content s_8">8</div>
24          <div class="content s_9">9</div>
25          <div class="content s_10">10</div>
26          <div class="content s_11">11</div>
27          <div class="content s_12">12</div>
28      </div>
29      <div class="slider_3">
30          <div class="content s_1">1</div>
31          <div class="content s_2">2</div>
32          <div class="content s_3">3</div>
33          <div class="content s_4">4</div>
34          <div class="content s_5">5</div>
35          <div class="content s_6">6</div>
36          <div class="content s_7">7</div>
37          <div class="content s_8">8</div>
38          <div class="content s_9">9</div>
39          <div class="content s_10">10</div>
40          <div class="content s_11">11</div>
41          <div class="content s_12">12</div>
42      </div>
43      <div class="dots_container">
44      </div>
45

css
1*{
2padding: 0;
3margin: 0;
4list-style-type: none
5}
6
7a{
8  cursor: pointer;
9}
10.content:nth-child(odd){
11  background-color: #ff0;
12}
13.content:nth-child(even){
14  background-color: #0ff;
15}
16.slider_nav{
17  display: flex;
18}
19.my_dots{
20  display: flex;
21}
22.my_dots li{
23  border: 1px solid #000;
24}
25span{
26  display: block;
27  height: 100%;
28  width: 100%;
29}
30.s_1_9::before{
31  content: "#0";
32  display: inline-block;
33}
34.s_10_::before{
35  content: "#";
36  display: inline-block;
37}

javascript
1$(function(){
2
3var slider_1 = $('.slider');
4var slider_2 = $('.slider_2');
5var slider_3 = $('.slider_3');
6
7slider_1.slick({
8  dots: true,
9  arrows: false,
10  infinite: false,
11  dotsClass: "my_dots",
12  customPaging: function(slider, i){
13      return $('<span>').text(i + 1);
14  },
15  appendDots: $(".dots_container"),
16  // このslickのdotsで一括して動かしたいです
17  // 組み合わせを変えてもダメでした
18  asNavFor: slider_2,
19  asNavFor: slider_3
20});
21slider_2.slick({
22  arrows: false,
23  infinite: false,
24  // dots: true,
25  // dotsClass: "my_dots",
26  // customPaging: function(slider, i){
27  //     return $('<span>').text(i + 1);
28  // },
29  // appendDots: $(".dots_container"),
30  // 組み合わせを変えてもダメでした
31  asNavFor: slider_1,
32  asNavFor: slider_3
33});
34slider_3.slick({
35  arrows: false,
36  infinite: false,
37  // dots: true,
38  // dotsClass: "my_dots",
39  // customPaging: function(slider, i){
40  //     return $('<span>').text(i + 1);
41  // },
42  // appendDots: $(".dots_container"),
43  // 組み合わせを変えてもダメでした
44  asNavFor: slider_1,
45  asNavFor: slider_2
46});
47
48var dots_i = $(".my_dots li span");
49
50$(".my_dots li span").each(function(){
51  var dots_i_txt = $(this).text();
52  console.log(dots_i_txt);
53  var dot_i_num = Number(dots_i_txt);
54  console.log(dot_i_num);
55  if(dot_i_num<10){
56    $(this).addClass("s_1_9")
57  };
58  if(dot_i_num>=10){
59    $(this).addClass("s_10_")
60  };
61});
62});
63

試したこと

各slick()functionに
dots: true,
dotsClass: "my_dots"
を記述してclassでの共通化ができると思いましたが、不要なdotsが表示されただけでした

asNavForを組み合わせ色々試してみましたが3つは一度に動きませんでした
方法が間違っていた場合はご指摘お願いいたします
$(function(){

var slider_1 = $('.slider');
var slider_2 = $('.slider_2');
var slider_3 = $('.slider_3');

slider_1.slick({
dots: true,
arrows: false,
infinite: false,
dotsClass: "my_dots",
customPaging: function(slider, i){
return $('<span>').text(i + 1);
},
appendDots: $(".dots_container"),
// このslickのdotsで一括して動かしたいです
// 組み合わせを変えてもダメでした
asNavFor: slider_2,
asNavFor: slider_3
});
slider_2.slick({
arrows: false,
infinite: false,
// dots: true,
// dotsClass: "my_dots",
// customPaging: function(slider, i){
// return $('<span>').text(i + 1);
// },
// appendDots: $(".dots_container"),
// 組み合わせを変えてもダメでした
asNavFor: slider_1,
asNavFor: slider_3
});
slider_3.slick({
arrows: false,
infinite: false,
// dots: true,
// dotsClass: "my_dots",
// customPaging: function(slider, i){
// return $('<span>').text(i + 1);
// },
// appendDots: $(".dots_container"),
// 組み合わせを変えてもダメでした
asNavFor: slider_1,
asNavFor: slider_2
});

var dots_i = $(".my_dots li span");

$(".my_dots li span").each(function(){
var dots_i_txt = $(this).text();
console.log(dots_i_txt);
var dot_i_num = Number(dots_i_txt);
console.log(dot_i_num);
if(dot_i_num<10){
$(this).addClass("s_1_9")
};
if(dot_i_num>=10){
$(this).addClass("s_10_")
};
});
});

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

回答1件

ベストアンサー

こんにちは。

公式サイトのデモに例がありますよ。

Slider Syncing

slick - the last carousel you'll ever need

投稿2020/10/27 01:11

Lhankor_Mhy

総合スコア36981

ShojiroAbe

2020/10/27 14:51

公式サイトのSlider Syncing欄のSlider Syncingを使って見てということでよろしかったでしょうか？？もしそうでしたら 2つのスライドはできたのですが、3つのスライドができませんでした 3つのスライドをasNavForで制御できますでしょうか？？それとも私の着眼点が間違ってたしょうか。試したことに改めて載せておきますよりしければ、改めてよろしくお願いいたします。

Lhankor_Mhy

2020/10/29 01:06

できると思います。ドキュメントに、 asNavFor Type:string とありますので、パラメータに渡すのはセレクタ文字列です。 CodePenに書いている方がいらっしゃいましたので、ご参考にされてはいかがですか？ https://codepen.io/amaurycatelan/pen/aQMOvw

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