###前提・実現したいこと
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/ツール等のバージョンなど)
より詳細な情報