質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

jsで上手いことスライドショーができません。

sbf
sbf

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

2グッド

0クリップ

427閲覧

投稿2022/11/07 20:09

編集2022/11/07 21:03

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
Cocode, sbf👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

修正箇所

1箇所修正するだけで直りました。

diff

1- const div = document.getElementsByClassName('div'); 2+ const [div] = document.getElementsByClassName('div');

不具合の原因

.getElementsByClassName()は要素を取得して配列のようなものに格納します。
たとえ該当する要素が1つしかなかったとしても、長さが1の配列を返します。

今回class="div"の要素は1つしかないと思うので、[div]と書いて分割代入するか、div[0]と1つ目(0番目)を指定してやればいいです。

しかし本来1つしか要素がないことが確定しているのであれば、idをつけて.getElementById()を使用した方がいいです。


矢印とドットがうまく表示されていない対策

  • クラス名が間違っていました
    • 🚫 .div-prev → ✅ .slick-prev
    • 🚫 .div-next → ✅ .slick-next
    • 🚫 .div-dots → ✅ .slick-dots
  • 詳細度がslickのデフォルトのCSSに負けていましたので、質問者様のCSSの詳細度を上げました
    • 🚫 .slick-prev → ✅ .div .slick-prev

css

1/*矢印の設定*/ 2 3/*戻る、次へ矢印の位置*/ 4.div .slick-prev, 5.div .slick-next { 6 position: absolute; 7 /*絶対配置にする*/ 8 z-index: 3; 9 top: 42%; 10 cursor: pointer; 11 /*マウスカーソルを指マークに*/ 12 outline: none; 13 /*クリックをしたら出てくる枠線を消す*/ 14 border-top: 2px solid #ccc; 15 /*矢印の色*/ 16 border-right: 2px solid #ccc; 17 /*矢印の色*/ 18 height: 25px; 19 width: 25px; 20} 21 22/* デフォルトの矢印を非表示 */ 23.div .slick-prev::before, 24.div .slick-next::before { 25 content: none; 26} 27 28.div .slick-prev { 29 /*戻る矢印の位置と形状*/ 30 left: 2.5%; 31 transform: rotate(-135deg); 32} 33 34.div .slick-next { 35 /*次へ矢印の位置と形状*/ 36 right: 2.5%; 37 transform: rotate(45deg); 38} 39 40/*ドットナビゲーションの設定*/ 41 42.div .slick-dots { 43 position: relative; 44 z-index: 3; 45 text-align: center; 46 margin: -50px 0 0 0; 47} 48 49.div .slick-dots li { 50 display: inline-block; 51 margin: 0 5px; 52} 53 54.div .slick-dots button { 55 color: transparent; 56 outline: none; 57 width: 8px; 58 /*ドットボタンのサイズ*/ 59 height: 8px; 60 /*ドットボタンのサイズ*/ 61 display: block; 62 border-radius: 50%; 63 background: #ccc; 64 /*ドットボタンの色*/ 65} 66 67/* デフォルトのドットを非表示 */ 68.div .slick-dots button::before { 69 content: none; 70} 71 72.div .slick-dots .slick-active button { 73 background: rgb(0, 0, 0); 74 /*ドットボタンの現在地表示の色*/ 75}

投稿2022/11/07 20:32

編集2022/11/07 21:06
Cocode

総合スコア2252

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

sbf

2022/11/07 20:43

ご親切に回答ありがとうございます。 無事スライダーが出来ました。 ですがcssの矢印とドットナビゲーションが上手いこと表示されません。 どうしてでしょうか?
Cocode

2022/11/07 20:45

ドットナビゲーションは表示されてますよ〜!画像に重なる形で下部に表示されています。 矢印に関してはわかりませんので調べてみます。
sbf

2022/11/07 21:02

返信ありがとうございます。 僕の画面ではドットナビゲーションが縦並びでおかしく表示されてしまいます。 画像を添付しときました。
Cocode

2022/11/07 21:07

回答を更新しました。お試しください。
sbf

2022/11/07 21:19

無事解決しました! ご丁寧にありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。