ブートストラップ画像カルーセル効果を実装する方法

この記事では主にブートストラップ画像カルーセル効果について詳しく紹介します。興味のある方はぜひ参考にしてください。

はじめに

Bootstrap Carousel プラグインは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。さらに、コンテンツは十分に柔軟であり、画像、iframe、ビデオ、またはその他の任意の種類のコンテンツを配置できます。

【関連ビデオ推奨: ブートストラップチュートリアル】

例

以下は、ブートストラップのカルーセル表示ループ要素プラグインを使用した画像のカルーセルを示しています。

<p id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <p class="carousel-inner" role="listbox">
  <p class="item active">
   <img src="..." alt="...">
   <p class="carousel-caption">
    ...
   </p>
  </p>
  <p class="item">
   <img src="..." alt="...">
   <p class="carousel-caption">
    ...
   </p>
  </p>
  ...
 </p>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</p>

src に画像を挿入し、画像のサイズを設定します

それにタイトルを追加することもできます

<p class="item">
 <img src="..." alt="...">
 <p class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </p>
</p>

関連する推奨事項:

JS を使用して画像カルーセルを実装する例

画像カルーセル効果を実装する方法

JQueryを使用して画像カルーセル効果を実装します

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