slick.jsを使ってスライダーの中にスライダーを設置して、連番通りにスライドさせたい。

###前提・実現したいこと
slick.jsを使ってスライダーの中にスライダーを設置して、
連番通りにスライドさせたい。

※スライダーの中には、最大1～4枚の画像が入ります。

分かりずらいですが、実現させたい動きの流れです。

例
box1
img1-1
img1-2
img1-3
img1-4
↓
box2
img2-1
img2-2
img2-3
img4-4
↓
box3
img3-1
img3-2
↓
box4
img4-1
img4-2
img4-3
・
・
・
ループ

###該当のソースコード

HTML
1    <div class="slider">
2      <div>
3        <ul class="slider__item">
4          <li>
5            <img src="images/slider_img.jpg" alt="">
6            <p>1-1</p>
7          </li>
8          <li>
9            <img src="images/slider_img.jpg" alt="">
10            <p>1-2</p>
11          </li>
12          <li>
13            <img src="images/slider_img.jpg" alt="">
14            <p>1-3</p>
15          </li>
16          <li>
17            <img src="images/slider_img.jpg" alt="">
18            <p>1-4</p>
19          </li>
20        </ul>
21        <ul class="slider__nav">
22          <li>
23            <img src="images/slider_img_s1.jpg" alt="">
24          </li>
25          <li>
26            <img src="images/slider_img_s2.jpg" alt="">
27          </li>
28          <li>
29            <img src="images/slider_img_s3.jpg" alt="">
30          </li>
31          <li>
32            <img src="images/slider_img_s4.jpg" alt="">
33          </li>
34        </ul>
35      </div>
36
37      <div>
38        <ul class="slider__item">
39          <li>
40            <img src="images/slider_img.jpg" alt="">
41            <p>2-1</p>
42          </li>
43          <li>
44            <img src="images/slider_img.jpg" alt="">
45            <p>2-2</p>
46          </li>
47        </ul>
48        <ul class="slider__nav">
49          <li>
50            <img src="images/slider_img_s1.jpg" alt="">
51          </li>
52          <li>
53            <img src="images/slider_img_s2.jpg" alt="">
54          </li>
55          <li>
56        </ul>
57      </div>
58
59      <div>
60        <ul class="slider__item">
61          <li>
62            <img src="images/slider_img.jpg" alt="">
63            <p>3-1</p>
64          </li>
65          <li>
66            <img src="images/slider_img.jpg" alt="">
67            <p>3-2</p>
68          </li>
69          <li>
70            <img src="images/slider_img.jpg" alt="">
71            <p>3-3</p>
72          </li>
73        </ul>
74        <ul class="slider__nav">
75          <li>
76            <img src="images/slider_img_s1.jpg" alt="">
77          </li>
78          <li>
79            <img src="images/slider_img_s2.jpg" alt="">
80          </li>
81          <li>
82            <img src="images/slider_img_s3.jpg" alt="">
83          </li>
84          <li>
85        </ul>
86      </div>
87    </div>
88```js
89
90```ここに言語を入力
91<script>
92  $(function() {
93    var slider = $('.slider').slick({
94      accessibility: true,
95      arrows: true
96    });
97    var slider__item = $('.slider__item').slick({
98      accessibility: true,
99      arrows: true,
100      asNavFor: '.slider__nav',
101    })
102    var slider__nav = $('.slider__nav').slick({
103      slidesToShow: 4,
104      arrows: false,
105      asNavFor: '.slider__item',
106      focusOnSelect: true
107    });
108  });
109</script>

###試したこと
現状の実装サンプルです。。。

今ボタンが二つ出ていますが、
スライド全体のスライドボタンと
1-1、1-2、1-3、1-4へスライドするボタンです。

上記ボタンを一つに、1-1、1-2、1-3、1-4までスライドすると、2-1にスライドさせたいのですがどうしたら実現できるのでしょうか。

ご教示お願いたします。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/09/01 04:44

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。