Slickを使い1つのページにサムネイル付きのスライダーを4つ設置しています。
それぞれに別のクラスをつけて
script
1<script> 2 $(function() { 3 $('.thumb-item').slick({ 4 infinite: true, 5 autoplay:true, 6 autoplaySpeed:3000, 7 speed: 2000, 8 swipeToSlide:true, 9 slidesToShow: 1, 10 slidesToScroll: 1, 11 arrows: false, 12 fade: true, 13 asNavFor: '.thumb-item-nav' 14 }); 15 $('.thumb-item-nav').slick({ 16 infinite: true, 17 swipeToSlide:true, 18 slidesToShow: 4, 19 slidesToScroll: 1, 20 arrows: true, 21 dots: true, 22 asNavFor: '.thumb-item', 23 focusOnSelect: true, 24 }); 25}); 26 $(function() { 27 $('.thumb-item2').slick({ 28 infinite: true, 29 autoplay:true, 30 autoplaySpeed:3000, 31 speed: 2000, 32 swipeToSlide:true, 33 slidesToShow: 1, 34 slidesToScroll: 1, 35 arrows: false, 36 fade: true, 37 asNavFor: '.thumb-item-nav2' 38 }); 39 $('.thumb-item-nav2').slick({ 40 infinite: true, 41 swipeToSlide:true, 42 slidesToShow: 4, 43 slidesToScroll: 1, 44 arrows: true, 45 dots: true, 46 asNavFor: '.thumb-item2', 47 focusOnSelect: true, 48 }); 49}); 50 $(function() { 51 $('.thumb-item3').slick({ 52 infinite: true, 53 autoplay:true, 54 autoplaySpeed:3000, 55 speed: 2000, 56 swipeToSlide:true, 57 slidesToShow: 1, 58 slidesToScroll: 1, 59 arrows: false, 60 fade: true, 61 asNavFor: '.thumb-item-nav3' 62 }); 63 $('.thumb-item-nav3').slick({ 64 infinite: true, 65 swipeToSlide:true, 66 slidesToShow: 4, 67 slidesToScroll: 1, 68 arrows: true, 69 dots: true, 70 asNavFor: '.thumb-item3', 71 focusOnSelect: true, 72 }); 73}); 74 $(function() { 75 $('.thumb-item4').slick({ 76 infinite: true, 77 autoplay:true, 78 autoplaySpeed:3000, 79 speed: 2000, 80 swipeToSlide:true, 81 slidesToShow: 1, 82 slidesToScroll: 1, 83 arrows: false, 84 fade: true, 85 asNavFor: '.thumb-item-nav4' 86 }); 87 $('.thumb-item-nav4').slick({ 88 infinite: true, 89 swipeToSlide:true, 90 slidesToShow: 4, 91 slidesToScroll: 1, 92 arrows: true, 93 dots: true, 94 asNavFor: '.thumb-item4', 95 focusOnSelect: true, 96 }); 97}); 98</script>
html
1<html> 2<div class="wrap"> 3 <ul class="slider thumb-item"> 4 <li><img src="images/sample-1.jpg" alt=""></li> 5 <li><img src="images/sample-2.jpg" alt=""></li> 6 <li><img src="images/sample-3.jpg" alt=""></li> 7 <li><img src="images/sample-4.jpg" alt=""></li> 8 <li><img src="images/sample-5.jpg" alt=""></li> 9 <li><img src="images/sample-6.jpg" alt=""></li> 10 </ul> 11 <ul class="slider thumb-item-nav"> 12 <li><img src="images/sample-1.jpg" alt=""></li> 13 <li><img src="images/sample-2.jpg" alt=""></li> 14 <li><img src="images/sample-3.jpg" alt=""></li> 15 <li><img src="images/sample-4.jpg" alt=""></li> 16 <li><img src="images/sample-5.jpg" alt=""></li> 17 <li><img src="images/sample-6.jpg" alt=""></li> 18 </ul> 19 </div> 20 <!-- これをページ内に4つ(クラス名と画像は違います)設置しています --> 21</html>
というように割り当ててるのですが4つ設置した中の最初と最後のものにしか矢印とドットが表示されません。
いろいろとやってはみたのですが解決できずにいます。
原因を教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー