Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

简单的轮播实例

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）索引 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
            <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
            <div class="carousel-caption">标题 2</div>
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
            <div class="carousel-caption">标题 2</div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;
    </a>
</div>

结果如图：

用法：

• 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
• 使用 data-slide-to 来向轮播传递一个滑动索引，data-slide-to=“2” 将轮播到第三个元素，索引从 0 开始计数。
• data-ride=“carousel” 属性用于标记轮播在页面加载时就开始自动轮播。
• data-interval 属性用于设置循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环，类型为number类型，默认值是5000。
• data-pause 用于设置鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环，默认值时hover。

---

                                                                                                                 具体用法可见 来源