Q&A
コードはマークダウンのcode機能を利用してください。
前提・実現したいこと
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>
上記試してみましたが、
縦並びに画像が羅列されてスライドになってくれませんでした…
お分かりの方いらっしゃいましたらどうぞご教示願います。
code機能、理解しておらず申し訳ございません。修正致しました。
ところで現在のコードで起きている問題は何でしょう。
ブラウザ開発ツールのコンソールも確認してエラーが起きていないか見てみてください。
現在、ご回答頂いた2つの方法で連番画像の一括指定は解決したのですが、
スライドがループで1枚目に戻る直前に
javascriptのコードが白背景に文字列で表示されるコマが入ってしまいます。
原因・解決策等お分かりでしたらご教授下さい。
要件変わってるので一度締められて別質問にされた方が良いかと。画面キャプチャも必要に思います
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
すみません。解決済にさせて頂きました。
回答2件
0
ベストアンサー
提示のJavaScriptのコードはエラーが出ます。
文字列連結は , ではなく + です。
また、forループの中に<div class="slider">を書いているので、例えそこを直したとしても下記のようになりますが、これは要件通りですか？
html
1<div class="slider"><div><a href="#"><img src="img/1.jpg" alt="img1"></a></div></div> 2<div class="slider"><div><a href="#"><img src="img/2.jpg" alt="img2"></a></div></div> 3<div class="slider"><div><a href="#"><img src="img/3.jpg" alt="img3"></a></div></div>
1つのスライドにforでループした数だけの枚数できあがるのではなく、
forでループした数だけスライドが出来上がりますね。
ただ、jQueryによる記述をしているので、なるべくjQueryで統一されたほうが良いですし、
document.write()は結構前から推奨されない機能になっているので、将来削除されるものと思って差し支えはありません。
innerHTMLなどに書き換えるべきですね（jQueryなら.html()）
今回は親要素指定してappend()の方が現実的でしょう。
slickまでは未検証ですがこんな感じ
js
1var photoNo=100; 2$(function(){ 3 for (var i=1; i<=photoNo; i++){ 4 var slide_child = $("<div></div>",{ 5 html:$("<a></a>",{ 6 "href":"#", 7 html:$("<img>",{ 8 "src":"img/"+i+".jpg", 9 "alt":"img"+i 10 }) 11 }) 12 }); 13 $(".slider").append(slide_child); 14 } 15 16 //slick起動の記述 17});
~~
余談ですが、if((i-1)%1==0){の条件って1のときにしか成り立たないような？
割り算で結果が0になるときって0を割った時しかないですよね。if(i==1){でいいような？~~
→すみません。ちょっと勘違いしてました。
1で割った余りが0ということでしたね。
となると全てに成り立ちますのでこの分岐意味ないように思います。1で割った場合は余りが出ません。
ということで、どのような意図でその分岐を入れているかわからなかったのでその部分は反映していません。
もし必要であればご自身で入れてください。
投稿2018/10/30 21:12
編集2018/10/30 21:20総合スコア80850
0
１．htmlに直接書いた7つの画像は正しく動くのですよね？
２．その場合、jsのループで追加された要素は同じでしょうか？
（予期してない<div>タグ等がありませんか？）
３．同じならば読み込みの順番ではないでしょうか？
上記２つを確認後問題なければ下記のようにしてみてください
js
1window.onload = function(){ 2 // ここにコード 3var photoNo=100; 4 // ・ 5 // ・ 6 // ・ 7};
投稿2018/10/30 14:43
総合スコア955
あなたの回答
tips
プレビュー
