Bootstrap3 轮番插件的使用方法

轮番

Bootstrap 的轮番插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。

使用方法

Bootstrap中的轮番由一个 class="carousel" 的容器定义，其中包含轮番指示器、轮番内容、轮番的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。如：

2.   ...

1）轮番指示器

轮番指示器是一个 class="carousel-indicators" 的有序列表，用来指示轮番的播放状态，对用户表现为一系列的小圆圈，实心圆表示当前处于活动状态的轮番条目。

轮番指示器中，子元素

的个数必须与轮番内容中的元素个数相等。子元素

的 data-target 属性值指示目标对象，必须设置为轮番容器的 id 值；data-slide-to 属性指示点击小圆圈时所要播放的轮番条目的索引值（索引从 0 开始）。还可以为默认处于活动状态的轮番条目添加 .active 类。默认是第一个条目处于活动状态。如：

2.   
3.   
4.   

2）轮番内容

轮番内容是一个轮番条目的列表，整个列表包含在一个 class="carousel-inner" 的容器中，列表中可以包含多个轮番条目，每个轮番条目包含在一个 class="item" 的容器中。还可以为默认处于活动状态的轮番条目添加 .active 类。默认是第一个条目处于活动状态。如果添加 .active 类，并确保它与列表指示器中定义的默认状态保持一致。

最简单的轮番内容只包含图片就可以了。如：

2.   
3.     
4.   

稍微复杂的轮番，可以通过一个 class="carousel-caption" 的容器来添加标题和说明。如：

2.   
3.     
4.     
5.       

   Second Thumbnail label

6.       

   Cras justo odio, dapibus ...

7.