Q&A
jsでimg要素を動的に作り、slick.jsでスライドショーをしたいのですが上手くいきません。
ブラウザには何も表示されないです。
間違えてる所を教えてください。
矢印とドットナビゲーションも正しく表示されない。
発生している問題・エラーメッセージ
Uncaught TypeError: div.appendChild is not a function
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>slide_show</title> 6 <script src="js/jquery-3.6.1.min.js"></script> 7 <link rel="stylesheet" href="css/slick.css"> 8 <link rel="stylesheet" href="css/arrow.css"> 9 </head> 10 <body> 11 <div class="div"></div> 12 <script src="js/slick.min.js"></script> 13 <script src=script.js></script> 14 </body> 15</html>
css
1.div{ 2 margin-bottom: 50px; 3 width: 1000px; 4 height: 618px; 5 margin: 0 auto; 6} 7 8 9 10/*矢印の設定*/ 11 12/*戻る、次へ矢印の位置*/ 13.div-prev, 14.div-next { 15 position: absolute;/*絶対配置にする*/ 16 z-index: 3; 17 top: 42%; 18 cursor: pointer;/*マウスカーソルを指マークに*/ 19 outline: none;/*クリックをしたら出てくる枠線を消す*/ 20 border-top: 2px solid #ccc;/*矢印の色*/ 21 border-right: 2px solid #ccc;/*矢印の色*/ 22 height: 25px; 23 width: 25px; 24} 25 26.div-prev {/*戻る矢印の位置と形状*/ 27 left:2.5%; 28 transform: rotate(-135deg); 29} 30 31.div-next {/*次へ矢印の位置と形状*/ 32 right:2.5%; 33 transform: rotate(45deg); 34} 35 36/*ドットナビゲーションの設定*/ 37 38.div-dots { 39 position: relative; 40 z-index: 3; 41 text-align:center; 42 margin:-50px 0 0 0; 43} 44 45.div-dots li { 46 display:inline-block; 47 margin:0 5px; 48} 49 50.div-dots button { 51 color: transparent; 52 outline: none; 53 width:8px;/*ドットボタンのサイズ*/ 54 height:8px;/*ドットボタンのサイズ*/ 55 display:block; 56 border-radius:50%; 57 background:#ccc;/*ドットボタンの色*/ 58} 59 60.div-dots .div-active button{ 61 background:rgb(0, 0, 0);/*ドットボタンの現在地表示の色*/ 62}
js
1const img_src = ['./img/web1.png', './img/web2.png', './img/web3.png'];//スライドショー画像の配列 2 3const div = document.getElementsByClassName('div'); 4 5for (const ingroup of img_src ) { 6 7 const img = document.createElement('img'); 8 img.src = ingroup; 9 img.alt = 'テスト'; 10 div.appendChild(img); 11} 12 13$('div').slick({ 14 autoplay: true,//自動的に動き出すか。初期値はfalse。 15 autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間 16 speed:1000,//スライドの動きのスピード。初期値は300。 17 infinite: true,//スライドをループさせるかどうか。初期値はtrue。 18 slidesToShow: 1,//スライドを画面に3枚見せる 19 slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる 20 arrows: true,//左右の矢印あり 21 prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更 22 nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更 23 dots: true,//下部ドットナビゲーションの表示 24 pauseOnFocus: false,//フォーカスで一時停止を無効 25 pauseOnHover: false,//マウスホバーで一時停止を無効 26 pauseOnDotsHover: false,//ドットナビゲーションをマウスホバーで一時停止を無効 27}); 28
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/11/07 20:43
2022/11/07 20:45
2022/11/07 21:02
2022/11/07 21:07
2022/11/07 21:19