前提・実現したいこと
プログラミング初心者です。
BootStrapを使用してカルーセルを作成したのですが、1枚目からスライドしません。
お手数ですが、ご教授いただければと思います。
発生している問題・エラーメッセージ
カルーセルの1つめのコンテナから移動しません。
ブラウザの検証にも、エラーは特に何も出ていません。
該当のソースコード
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- Bootstrap CSS --> 9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> 10 <link rel="stylesheet" href="/css/practice.css"> 11 12 <title>carousel-item_practice</title> 13 </head> 14 <body> 15 16 <div id="mycarousel" class="carousel slide" data-ride="carousel"> 17 <div class="carousel-inner"> 18 <div class="carousel-item active"> 19 <div class="container"> 20 <h1>ヘッドライン</h1> 21 <p>ヘッドライン。ここに記載してあるものはヘッドラインです。 22 </p> 23 <a href="#" class="btn btn-lg btn-primary"> 24 サインアップはこちら 25 </a> 26 </div> 27 </div> 28 <div class="carousel-item"> 29 <div class="container"> 30 <h1>ヘッドライン</h1> 31 <p>ヘッドライン。ここに記載してあるものはヘッドラインです。。。。 32 </p> 33 <a href="#" class="btn btn-lg btn-primary"> 34 サインアップはこちら 35 </a> 36 </div> 37 </div> 38 </div> 39 </div> 40 41 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> 42 43 <!--jquery--> 44 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 45 </body> 46</html>
CSS
1.carousel-item{ 2 height: 32rem; 3 background: #777777; 4 color: white; 5 position: relative; 6} 7.container{ 8 position: absolute; 9 bottom: 0; 10 left: 0; 11 right: 0; 12 padding-bottom: 50px; 13}
試したこと
ググって、複数個のカルーセルを作成てみましたが、どれも1枚目から動きません。
chromeの検証ツールでエラーを見ましたが、見当たりませんでした。
Windowsの設定も確認し、「アニメーション」はオンになってました(関係ないかもしれませんが・・・)
補足情報(FW/ツールのバージョンなど)
VScodeでコードを記載し、拡張ツールのGoLiveで確認しています。
ブラウザはchromeを使用しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/04 07:07