boostrapを利用してカルーセルを完成させたいです。

#ぶつかっている問題
boostrapを使ったカルーセルを作成したいのですが画像が表示されません。

##試したこと
①画像の指定方法に関して確認しました。ですが、絶対パスの指定をしても変化がありません
②cssから画像の指定を行おうと考えbackgroundーimageなどで指定しましたが変化がありません。

スライドの中に .active クラスが1つ必要です。ない場合は表示されません。

という表記があったのも気になっております。

##コードに関して
色々いじったのですが変化がなく無意味なことだと考えたため、最初のコードを記載させて頂きました。

https://getbootstrap.jp/docs/4.5/components/carousel/

html
1<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
2  <div class="carousel-inner">
3    <div class="carousel-item active">
4      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
5    </div>
6    <div class="carousel-item">
7      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
8    </div>
9    <div class="carousel-item">
10      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
11    </div>
12  </div>
13  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
14    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
15    <span class="sr-only">Previous</span>
16  </a>
17  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
18    <span class="carousel-control-next-icon" aria-hidden="true"></span>
19    <span class="sr-only">Next</span>
20  </a>
21</div>
22

##最後に
どのようにすれば解決するかご教示頂きたいです。お時間があれば、原因についてもご教示いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

boostrapを使ったカルーセルを作成したいのですが画像が表示されません

とりあえず、imgタグを使ってみてはどうですか？

サンプル

html
1<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
2  <div class="carousel-inner">
3    <div class="carousel-item active">
4      <img src="http://placehold.jp/24/cc9999/993333/800x400.png?text=First slide">
5    </div>
6    <div class="carousel-item">
7      <img src="http://placehold.jp/24/cc9999/993333/800x400.png?text=Second slide">
8    </div>
9    <div class="carousel-item">
10      <img src="http://placehold.jp/24/cc9999/993333/800x400.png?text=Third slide">
11    </div>
12  </div>
13  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
14    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
15    <span class="sr-only">Previous</span>
16  </a>
17  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
18    <span class="carousel-control-next-icon" aria-hidden="true"></span>
19    <span class="sr-only">Next</span>
20  </a>
21</div>