What three parts does the bootstrap image carousel consist of?

A carousel image mainly consists of three parts:

☑ Carousel image

☑ Carousel image counter

☑ Controller for carousel pictures

Step one: Design a container for carousel pictures. Use the carousel style in the Bootstrap framework, and define an ID value for this container, so that the data attribute can be used later to declare the trigger.

The code is as follows:

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

Step 2: Design the carousel image counter. Add a carousel picture calculator inside the container div.carousel, using the carousel-indicators style. Its main function is to display the playback order of the current pictures (if there are several pictures, place several li's). It is generally made using a sequential list:

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

Step 3: Design the carousel image playback area. In the entire effect of carousel images, the playback area is the most critical area. This area is mainly used to place images that need to be rotated. This area is controlled using the carousel-inner style, and it is also placed in the carousel container, and each carousel image is placed through the item container:

<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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy"   alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy"   alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy"   alt=""></a>
 </div>
 </div>
</div>　

Related recommendations: "BootStrap Getting Started Tutorial》

Step 4: Set the carousel image description. Many carousel image effects have their own titles and descriptions corresponding to each image. In fact, Carousel in the Bootstrap framework also provides similar effects. Just add the corresponding code at the bottom of the image in item:

<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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy"   alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

Step 5: Design the carousel image controller. Many times carousels also have a forward and backward controller. This is achieved in Carousel through the carousel-control style combined with left and right. Among them, left means playing forward and right means playing backward. It is also placed in the carousel container:

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

The above is the detailed content of What three parts does the bootstrap image carousel consist of?. For more information, please follow other related articles on the PHP Chinese website!