ブートストラップカルーセルのやり方

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

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

カルーセルは、指定された時間間隔内で自動的に表示される画像またはスライドショーのコレクションです。 Bootstrapは、WebページでCarouselダイアグラムを簡単に作成できるシンプルなクラスを提供します。

ステップ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：インジケーターを追加（オプション）

インジケータは、カルーセル図に電流と潜在的なスライドショーを表示します。コンテナ内に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：コントロールを追加（オプション）

コントロールにより、ユーザーはカルーセル図を手動でナビゲートできます。コンテナ内に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 // 自动播放的间隔时间（毫秒） });</code>

仕上げる

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

以上がブートストラップカルーセルのやり方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。