スライドに画像を表示したいです

Question

実現したいこと

• スライド画像機能を動作するようにする

前提

• bootstrap導入済み
• 参考サイトhttps://blog.codecamp.jp/bootstrap-howto-commentary

画像投稿SNSを作っています。
トップ画面にてスライド機能を実装したいのですが、画像の指定方法が分かりません。

発生している問題・エラーメッセージ

サイトにimg srcの部分を書き換えれば自分が望む画像に書き換えられる、とのことでしたが記述方法が分かりません。

該当のソースコード

これはサイトの例文です。
 <div class="carousel-item">
            <img src="img/sample3.jpg" class="d-block w-100" alt="...">
          </div>

試したこと

使用したい画像はasset>imagesの中にあるので、<img src="../../assets/images/about5.jpg"　と記入しました。

<div class="carousel-inner"> <div class="carousel-item active"> <img src="../../assets/images/about5.jpg" class="d-block w-100" alt="example"> </div>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
ここも含める必要があります。

また、この参考記事でのBootstrapのバージョンは4.5ですが、現在は5.3.0が最新版です。JPサイトでも5.0.2が最新となっています。それにともなってdata-rideはdata-bs-rideに変わっているので最新版を使う際は注意してください。ドキュメントはこちらを参考にしてください。

画像の指定方法が分かりません

というのがsrc=以降のパスの設定に誤りがある場合があります。
相対パスは記述しているhtmlファイルから見て画像ファイルがどこにあるのかを指します。
ディレクトリassetsがhtmlと同じディレクトリにあるなら、src="assets/images/about5.jpg"のように書きます。

Comments

[miico9]

＠2ckD様
丁寧な解説ありがとうございます！
参考記事のバージョンを見逃していたので、今後参考資料を選ぶ際には確認いたします。
ご回答いただきありがとうございました。