前提・実現したいこと
slickの画像の指定で大量の連番画像(1.jpg~100.jpg)をスライドにする場合に
画像の<div>タグを羅列せずに枚数指定で自動で読み込ませたいです。
HTML
1<html> 2 3<div class="slider"> 4 <div><a href="#"><img src="img/1.jpg" alt="img1"></a></div> 5 <div><a href="#"><img src="img/2.jpg" alt="img2"></a></div> 6 <div><a href="#"><img src="img/3.jpg" alt="img3"></a></div> 7 <div><a href="#"><img src="img/4.jpg" alt="img4"></a></div> 8 <div><a href="#"><img src="img/5.jpg" alt="img5"></a></div> 9 <div><a href="#"><img src="img/6.jpg" alt="img6"></a></div> 10 <div><a href="#"><img src="img/7.jpg" alt="img7"></a></div> 11 : 12 : 13</div> 14 15<script type="text/javascript"> 16 $('.slider').slick({ 17 autoplay:true, 18 autoplaySpeed:100, 19 dots:false, 20 }); 21</script>
試したこと
HTML
1 2<script type="text/javascript"> 3 4 var photoNo=100; 5 for (var i=1; i<=photoNo; i++){ 6 if((i-1)%1==0){ 7 document.write('<div class="slider"><div><a href="#" ><img src="img/',i,'.jpg" ></a></div></div>'); 8 } 9 else{ 10 document.write('<div class="slider"><div><a href="img/',i,'.jpg" ><img src="img/',i,'.jpg"></a></div></div>'); 11 } 12 } 13 14</script> 15 16<script type="text/javascript"> 17 $('.slider').slick({ 18 autoplay:true, 19 autoplaySpeed:1000, 20 dots:false, 21 }); 22</script>
上記試してみましたが、
縦並びに画像が羅列されてスライドになってくれませんでした…
お分かりの方いらっしゃいましたらどうぞご教示願います。
回答2件
あなたの回答
tips
プレビュー