ブートストラップ画像カルーセルは 3 つの部分で構成されていますか?

カルーセル画像は主に 3 つの部分で構成されます:

☑ カルーセル画像

☑ カルーセル画像カウンター

☑ カルーセル用コントローラーphotos

ステップ 1: カルーセル画像のコンテナをデザインします。ブートストラップ フレームワークでカルーセル スタイルを使用し、このコンテナーの ID 値を定義して、後でデータ属性を使用してトリガーを宣言できるようにします。

コードは次のとおりです:

<div id="slidershow" class="carousel"></div>

ステップ 2: カルーセル画像カウンターを設計します。カルーセル インジケーター スタイルを使用して、コンテナー div.carousel 内にカルーセル画像計算機を追加します。その主な機能は、現在の画像の再生順序を表示することです (画像が複数ある場合は、いくつかの li を配置します)。これは通常、順次リスト:

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

ステップ 3: カルーセル画像の再生領域を設計します。カルーセル画像の効果全体の中で、再生領域は最も重要な領域であり、主に回転する必要のある画像を配置するために使用されます。この領域は、carousel-inner スタイルを使用して制御され、カルーセル コンテナーにも配置され、各カルーセル画像はアイテム コンテナーを介して配置されます。

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 </div>
 </div>
</div>　

関連する推奨事項: 「BootStrap 入門チュートリアル」 》

ステップ 4: カルーセル画像の説明を設定する. 多くのカルーセル画像効果には、各画像に対応する独自のタイトルと説明があります。実際、Bootstrap フレームワークの Carousel も同様の効果を提供します。画像の下部の項目に対応するコードを追加するだけです:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3>图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

ステップ 5: カルーセル画像コントローラーを設計します。多くの場合、カルーセルには前方コントローラーと後方コントローラーもあります。これは、カルーセルで左右を組み合わせたカルーセル コントロール スタイルによって実現されます。このうち、左は順方向再生、右は逆方向再生を意味します。カルーセル コンテナーにも配置されます:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

以上がブートストラップ画像カルーセルは 3 つの部分で構成されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。