ブートストラップを使用してカルーセルチャートを作成するには、次の手順が必要です。カルーセルクラスを使用して、カルーセルチャートを含むコンテナを作成します。 Carousel-Itemクラスとアクティブクラスを使用して、コンテナにカルーセル畫(huà)像を追加します（最初の畫(huà)像のみ）。 Carousel-Control-PrevとCarousel-Control-Nextクラスを使用して、コントロールボタンを追加します。 Carousel-Indicators（小さなドット）を追加し、Carousel-Indicatorsクラス（オプション）を使用します。自動(dòng)再生をセットアップし、data-bs-ride = "carousel"をカルーセルコンテナに追加します

ブートストラップを使用してカルーセルを書(shū)き込む方法

Carouselは、Webページに一連の畫(huà)像を表示するインタラクティブなコンポーネントです。 Bootstrapを使用して、WebページにCarousel畫(huà)像を簡(jiǎn)単に追加します。

カルーセルチャートコンテナを作成します

まず、 carouselクラスを使用して、カルーセル図を含むコンテナを作成します。

 <code class="html"><div class="carousel"> ... </div></code>

カルーセル畫(huà)像を追加します

次に、コンテナにカルーセル畫(huà)像の畫(huà)像を追加します。各畫(huà)像にはcarousel-itemクラスとactiveクラス（最初の畫(huà)像のみ）を含める必要があります。

 <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>

Carouselグラフコントロールを追加します

コントロールボタン（前および次の畫(huà)像）を追加するには、次のコードをコンテナに追加する必要があります。

 <code class="html"><a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a></code>

#myCarousel CarouselグラフコンテナのIDに置き換えてください。

カルーセルチャートインジケーターを追加（オプション）

Carouselグラフメトリック（小さなドット）を追加するには、コンテナに次のコードを追加する必要があります。

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

自動(dòng)再生を設(shè)定する（オプション）

Carouselグラフを自動(dòng)的に再生するには、Carouselグラフコンテナにdata-bs-ride="carousel"屬性を追加します。

 <code class="html"><div class="carousel" data-bs-ride="carousel"> ... </div></code>

以上がブートストラップにカルーセルの寫(xiě)真を書(shū)く方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。