Q&A
お世話になります。
bootstrapのカルーセルで9枚の画像を使用してスライドショーを作っていて、全体の画像の切り替え時間を短くしたいと思ってますが、うまくいきません。
以下についてアドバイスいただきたいです。
・Bootstrapのカルーセルに全体の画像の切り替え時間を設定する方法はあるか
自分で試してみてうまくいかなかったのは以下の通りです。
html
1<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 2 <ol class="carousel-indicators"> 3 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" id="pic1"></li> 4 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 5 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 6 <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> 7 <li data-target="#carouselExampleIndicators" data-slide-to="4"></li> 8 <li data-target="#carouselExampleIndicators" data-slide-to="5"></li> 9 <li data-target="#carouselExampleIndicators" data-slide-to="6"></li> 10 <li data-target="#carouselExampleIndicators" data-slide-to="7"></li> 11 <li data-target="#carouselExampleIndicators" data-slide-to="8"></li> 12 </ol> 13 14 <div class="carousel-inner"> 15 <div class="carousel-item active"> 16 <img src="01.jpg" alt="" width="100%" /> 17 </div> 18 <div class="carousel-item"> 19 <img src="02.jpg" alt="" width="100%" /> 20 </div> 21 <div class="carousel-item"> 22 <img src="03.jpg" alt="" width="100%" /> 23 </div> 24 <div class="carousel-item"> 25 <img src="04.jpg" alt="" width="100%" /> 26 </div> 27 <div class="carousel-item"> 28 <img src="05.jpg" alt="" width="100%" /> 29 </div> 30 </div> 31 <div class="carousel-item"> 32 <img src="06.jpg" alt="" width="100%" /> 33 </div> 34 <div class="carousel-item"> 35 <img src="07.jpg" alt="" width="100%" /> 36 </div> 37 <div class="carousel-item"> 38 <img src="08.jpg" alt="" width="100%" /> 39 </div> 40 <div class="carousel-item"> 41 <img src="09.jpg" alt="" width="100%" /> 42 </div> 43 </div> 44 <a class= "carousel-control-prev" href= "#carouselExampleIndicators" role= "button" data-slide= "prev" > 45 <span class= "carousel-control-prev-icon" aria-hidden= "true" ></span> 46 <span class= "sr-only" > Previous </span> 47 </a> 48 <a class= "carousel-control-next" href= "#carouselExampleIndicators" role= "button" data-slide= "next" > 49 <span class= "carousel-control-next-icon" aria-hidden= "true" ></span> 50 <span class= "sr-only" > Next </span> 51 </a> 52</div>
回答1件
0
ベストアンサー
ドキュメントのoptionに記載さている通り、intervalがデフォルトで5000ms（5秒）なので、そこの指定をかえてください。
スクリプトではなくHTMLのダグから指定する場合は、data-[option名]の形式にします。
data-interval="1000" 1秒で切替
https://getbootstrap.com/docs/4.0/components/carousel/#options
投稿2020/03/11 03:29
総合スコア330
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。