1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Bootstrap4.5で設置したcarouselスライドの画像が変更出来ない

Posted at

#やりたいこと
作成しているWebページにBootstrapでcarouselスライドを設置したい

#問題
Bootstrapのドキュメントからコピペしたcarouselスライドのimg部分がsvgタグになっていて、用意したimgファイルに入替が出来ない。

コピペしたBootstrap/Components/carouselは以下の日本語ドキュメントサイトを参照
https://getbootstrap.jp/docs/4.5/components/carousel/

⇓ With indicatorsからimg部分を抜粋 ⇓

<div class="carousel-item">
  <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>
</div>

※コードは(carousel-innerの中の1つのitem)


⇓ With captions ⇓

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

With indicatorsの```carousel-item```の中にWith captionsの```imgタグとdivタグ(h2,p)```を入れ子にすれば良いのか??と思い、実行したところsvgタグの描画は消えず、その下にWith captionsのimgタグで設定した画像が表示される。

#環境
Windouws10
Bootstrap v-4.5

#原因
Bootstrapのドキュメントからコピペしたcarouselスライドのimg部分が日本語ドキュメントサイトと英語ドキュメントサイトとで違っていた。
Bootstrap 日本語ドキュメントサイト With indicatorsとWith captionsが分かれている記載されている
https://getbootstrap.jp/docs/4.5/components/carousel/

<div class="carousel-item active">
  <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>
</div>

※コードは(carousel-innerの中の1つのitem)


Bootstrap 英語ドキュメントサイト With indicatorsとWith captionsが分かれていない
https://getbootstrap.com/docs/4.5/components/carousel/

<div class="carousel-item active">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>First slide label</h5>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  </div>
</div>

※コードは(carousel-innerの中の1つのitem)


比較すると日本語ドキュメントは画像部分がsvgタグとなっていて、英語ドキュメントは画像部分がimgタグになっている。

#解決
英語ドキュメントのcarousel/With captionsをコピペして使用した。

#あとがき
日本語版と英語版のどちらも公式のドキュメントだと思っていましたが、それぞれ違っている場合があるので注意が必要。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?