Bootstrap 轮播插件

轮播插件

Carousel 插件是一个用于循环浏览元素的组件，例如轮播（幻灯片）。

提示：插件可以单独包含（使用 Bootstrap 的单独 "carousel.js" 文件），也可以一次性包含所有插件（使用 "bootstrap.js" 或 "bootstrap.min.js"）。

轮播示例

笔记：Internet Explorer 9 及更早版本中不正确支持轮播（因为它们使用 CSS3 过渡和动画来实现幻灯片效果）。

如何创建轮播

以下示例展示了如何创建基本轮播：

示例

<div id="myCarousel" class="carousel slide" data-ride="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>


<div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
</div>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
</a>
</div>

亲自试一试 »

示例解释

最外面的<div>：

轮播需要使用 id（在本例中id="myCarousel"）以使轮播控件正常工作。

这个class="carousel"指定这<div>包含一个轮播。

这个.slide类添加了 CSS 过渡和动画效果，使项目在显示新项目时滑动。如果您不想要这种效果，请忽略此类。

这个data-ride="carousel"属性告诉 Bootstrap 在页面加载时立即开始为轮播设置动画。

"Indicators" 部分：

指示器是每张幻灯片底部的小点（指示轮播中有多少张幻灯片，以及用户当前正在查看哪张幻灯片）。

指标在具有类别的有序列表中指定.carousel-indicators。

这个data-target属性指向轮播的 id。

这个data-slide-to属性指定单击特定点时要转到哪张幻灯片。

"Wrapper for slides" 部分：

幻灯片指定在<div>与类.carousel-inner。

每张幻灯片的内容定义在<div>与类.item。这可以是文本或图片。

这个.active需要将课程添加到其中一张幻灯片中。否则，轮播将不可见。

"Left and right controls" 部分：

此代码添加了 "left" 和 "right" 按钮，允许用户手动在幻灯片之间来回切换。

这个data-slide属性接受关键字"prev"或者"next"，这会改变幻灯片相对于其当前位置的位置。

向幻灯片添加标题

添加<div class="carousel-caption">每个内<div class="item">为每张幻灯片创建标题：

示例

<div id="myCarousel" class="carousel slide" data-ride="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>


<div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>LA is always so much fun!</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>
    </div>
</div>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
</a>
</div>