8個のスライダーを同じページに表示させたいです。
Jquery
1 2$('.snapNumber1').slick({ 3 autoplay: false, 4 //autoplaySpeed: 2500, 5 speed: 800, 6 dots: true, 7 arrows: true, 8 prevArrow: $('.snapPrev1'), 9 nextArrow: $('.snapNext1'), 10 centerMode: true, 11 centerPadding: '20%' 12 }); 13 14$('.snapNumber2').slick({ 15 autoplay: false, 16 //autoplaySpeed: 2500, 17 speed: 800, 18 dots: true, 19 arrows: true, 20 prevArrow: $('.snapPrev2'), 21 nextArrow: $('.snapNext2'), 22 centerMode: true, 23 centerPadding: '20%' 24 }); 25 26$('.snapNumber3').slick({ 27 autoplay: false, 28 //autoplaySpeed: 2500, 29 speed: 800, 30 dots: true, 31 arrows: true, 32 prevArrow: $('.snapPrev3'), 33 nextArrow: $('.snapNext3'), 34 centerMode: true, 35 centerPadding: '20%' 36 }); 37 38$('.snapNumber4').slick({ 39 autoplay: false, 40 //autoplaySpeed: 2500, 41 speed: 800, 42 dots: true, 43 arrows: true, 44 prevArrow: $('.snapPrev4'), 45 nextArrow: $('.snapNext4'), 46 centerMode: true, 47 centerPadding: '20%' 48 }); 49 50$('.snapNumber5').slick({ 51 autoplay: false, 52 //autoplaySpeed: 2500, 53 speed: 800, 54 dots: true, 55 arrows: true, 56 prevArrow: $('.snapPrev5'), 57 nextArrow: $('.snapNext5'), 58 centerMode: true, 59 centerPadding: '20%' 60 });
・
・
・
と書いてもいいのですが、もっとスマートに書きたいです。
jqery
1$('.snapNumber').each(function(i){ 2 $(this).attr('class','snapNumber' + (i+1)); 3 $('.snapNumber()').slick({ 4 autoplay: false, 5 //autoplaySpeed: 2500, 6 speed: 800, 7 dots: true, 8 arrows: true, 9 prevArrow: $('.snapPrev()'), 10 nextArrow: $('.snapNext()'), 11 centerMode: true, 12 centerPadding: '20%' 13 }); 14 }); 15
このような感じで書きたいのですが、どうやったら動こくように書けるのでしょうか?
よろしくお願いします。
htmlを追加しました。
html
1<div class="snapSlider"> 2 <div class="snapPrev"></div> 3 <div class="slider snapNumber"> 4 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 5 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 6 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 7 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 8 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 9 </div> 10 <div class="snapNext"></div> 11 </div> 12 13 <div class="snapSlider"> 14 <div class="snapPrev"></div> 15 <div class="slider snapNumber"> 16 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 17 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 18 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 19 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 20 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 21 </div> 22 <div class="snapNext"></div> 23 </div> 24
回答3件
あなたの回答
tips
プレビュー