ブートストラップカルーセルグラフを作成するには、次の手順を?qū)g行します。カルーセルクラスで親コンテナを作成します。スライドを追加し、Carousel-Itemクラスを使用して、アクティブクラスを最初のスライドに追加します。 （オプション）インジケータを追加して、コンテナ內(nèi)にCarousel-Indicatorsクラスを含むOL要素を追加します。 （オプション）コントロールを追加し、コンテナにカルーセルコントロール-PREVとカルーセルコントロールネクストクラスを備えたボタンを追加します。 （オプション）Autoplay、タイマー、およびインジケーターを有効にするために、JavaScriptを使用してCarouselグラフを初期化します。

ブートストラップカルーセルを作成する方法

カルーセルは、指定された時(shí)間間隔內(nèi)で自動(dòng)的に表示される畫(huà)像またはスライドショーのコレクションです。 Bootstrapは、WebページでCarouselダイアグラムを簡(jiǎn)単に作成できるシンプルなクラスを提供します。

ステップ1：コンテナを作成します

carouselクラスで親コンテナを作成します。

 <code class="html"><div class="carousel">
<p><strong>ステップ2：スライドを追加します</strong></p>
<p>コンテナにスライドを追加し、 <code>carousel-item</code>クラスを使用します。</p>
<pre class="brush:php;toolbar:false"> <code class="html"><div class="carousel-item active"> <img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> </div> <div class="carousel-item"> <img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> </div></code>

activeクラスを最初のスライドに追加すると、最初のスライドとして表示されます。

ステップ3：インジケーターを追加（オプション）

インジケータは、カルーセル図に電流と潛在的なスライドショーを表示します。コンテナ內(nèi)にcarousel-indicatorsクラスを備えたol要素を追加します。

 <code class="html"><ol class="carousel-indicators"> <li data-target=".carousel" data-slide-to="0" class="active"> <li data-target=".carousel" data-slide-to="1"> </ol></code>

ステップ4：コントロールを追加（オプション）

コントロールにより、ユーザーはカルーセル図を手動(dòng)でナビゲートできます。コンテナ內(nèi)にcarousel-control-prevとcarousel-control-nextクラスを備えたボタンを追加します。

 <code class="html"><a class="carousel-control-prev" href=".carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">上一張</span> </a> <a class="carousel-control-next" href=".carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">下一張</span> </a></code>

ステップ5：カルーセルマップの初期化（オプション）

Autoplay、タイマー、およびインジケーターを有効にするために、JavaScriptを使用してCarouselグラフを初期化します。

 <code class="javascript">$('.carousel').carousel({ interval: 5000 // 自動(dòng)播放的間隔時(shí)間（毫秒） });</code>

仕上げる

これらの手順は、自動(dòng)再生、インジケーター、およびコントロールを備えたレスポンシブブートストラップカルーセルを作成します。