ブートストラップにカルーセルの写真を使用する方法

BootstrapでCarouselコンポーネントを使用するには、次の手順が必要です。Bootstrapファイルを含めます。カルーセル容器を作成します。スライドショーを追加します。アクティブなスライドショーをセットアップします。ナビゲーションコントロールを追加します。

ブートストラップでカルーセルを使用する方法

BootstrapのCarouselコンポーネントを使用すると、Webページで自動的にスライド式画像またはビデオシーケンスを作成できます。 BootstrapでCarouselを使用する方法は次のとおりです。

ステップ1：ブートストラップを含めます

HTMLページにBootstrapのCSSとJavaScriptファイルを含める：

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script></code>

ステップ2：カルーセル容器を作成します

カルーセル容器としてdiv要素を作成します。

 <code class="html"><div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ul>
<li> <code>id</code>属性は一意であり、カルーセルを参照するために使用されます。</li>
<li> <code>carousel slide</code>クラスは、これがカルーセルであることを意味します。</li>
<li> <code>data-bs-ride="carousel"</code>プロパティは、カルーセルの自動再生を有効にします。</li>
</ul>
<p><strong>ステップ3：スライドを追加します</strong></p>
<p>コンテナ内で、 <code>div</code>要素を使用してスライドを作成します。</p>
<pre class="brush:php;toolbar:false"> <code class="html"><div class="carousel-inner"> <!-- 添加幻灯片--> </div></code>

<li>各スライドには、タイトルと説明（オプション）とともに画像またはビデオを含める必要があります。

ステップ4：アクティブなスライドショーをセットアップします

activeクラスを使用して、最初のスライドをアクティブスライドとして設定します。

 <code class="html"><div class="carousel-item active"> <!-- 幻灯片内容--> </div></code>

ステップ5：ナビゲーションコントロールを追加します

矢印のボタンとページャーを使用して、カルーセルのナビゲーションコントロールを追加します。

 <code class="html"><button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> <ol class="carousel-indicators"> <!-- 添加分页器--> </ol></code>

<li>矢印のdata-bs-targetおよびdata-bs-slideプロパティは、カルーセル容器に接続されています。 <li>各スライドのポケットベルに<li>要素を追加します。

カスタマイズとオプション

カルーセル間隔の設定、ナビゲーションコントロールの外観の変更など、カルーセルをさらにカスタマイズできます。利用可能なオプションとカスタマイズの詳細については、Bootstrapドキュメントを参照してください。