Bootstrap JS 轮播参考


JS 轮播 (carousel.js)

Carousel 插件是一个用于循环遍历元素的组件,例如轮播(幻灯片)。

有关轮播的教程,请阅读我们的 Bootstrap 轮播教程

注意: Internet Explorer 9 及更早版本不正确支持轮播(因为它们使用 CSS3 过渡和动画来实现幻灯片效果)。


Carousel 轮播插件类

描述
.carousel 创建一个轮播
.slide 从一项滑动到下一项时添加 CSS 过渡和动画效果。如果您不想要此效果,请删除此类
.carousel-indicators 为轮播添加指示器。这些是每张幻灯片底部的小点(表示轮播中有多少张幻灯片,以及用户当前正在查看哪张幻灯片)
.carousel-inner 将幻灯片添加到轮播
.icon-next Unicode 图标(指向右侧的箭头),用于轮播。这通常用于代替字形图标
.icon-prev Unicode 图标(指向左的箭头),用于轮播。这通常用于代替字形图标
.item 指定每张幻灯片的内容
.left carousel-control 向轮播添加左按钮,允许用户在幻灯片之间返回
.right carousel-control 在轮播中添加一个右键,允许用户在幻灯片之间前进
.carousel-caption 指定轮播的标题

通过 data-* 属性

data-ride="carousel" 属性激活轮播。

data-slidedata-slide-to 属性指定要转到哪张幻灯片。

data-slide 属性接受两个值: prevnext, 而 data-slide-to 接受数字。

实例

<!-- 轮播 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- 轮播指标 -->
<li data-target="#myCarousel" data-slide-to="1"></li>

<!-- 轮播控件 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
亲自试一试 »


通过 JavaScript

手动启用:

实例

// 激活轮播
$("#myCarousel").carousel();

// 启用轮播指示器
$(".item").click(function(){
  $("#myCarousel").carousel(1);
});

// 启用轮播控件
$(".left").click(function(){
  $("#myCarousel").carousel("prev");
});
亲自试一试 »

Carousel 轮播选项

选项可以通过数据属性或 JavaScript 传递。 对于数据属性,将选项名称附加到 data-,如 data-interval="".

名称 类型 默认值 描述 试一试
interval 数字,或布尔值 false 5000 指定每张幻灯片之间的延迟(以毫秒为单位)。

注意: 将interval设置为false以阻止项目自动滑动
Using JS Using data
pause 字符串,或布尔值 false "hover" 当鼠标指针进入轮播时暂停轮播通过下一张幻灯片,当鼠标指针离开轮播时恢复滑动

注释: 将 pause 设置为 false 以停止在悬停时暂停的功能
Using JS Using data
wrap boolean true 指定轮播是连续浏览所有幻灯片,还是在最后一张幻灯片处停止

  • true - 连续循环
  • false - 停在最后一项
Using JS Using data

Carousel 轮播方法

下表列出了所有可用的轮播方法。

方法 描述 试一试
.carousel(options) 使用选项激活轮播。 请参阅上面的选项以获取有效值 测试一下
.carousel("cycle") 从左到右遍历轮播项目 测试一下
.carousel("pause") 停止轮播通过项目 测试一下
.carousel(number) 转到指定项目(从零开始:第一项为 0,第二项为 1,等等。) 测试一下
.carousel("prev") 转到上一个项目 测试一下
.carousel("next") 转到下一个项目 测试一下

Carousel 轮播事件

下表列出了所有可用的轮播事件。

事件 描述 试一试
slide.bs.carousel 当轮播即将从一个项目滑到另一个项目时发生 测试一下
slid.bs.carousel 当轮播完成从一个项目滑到另一个项目时发生 测试一下

更多实例

幻灯片的字幕

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

实例


<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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- 幻灯片包装 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- 左右控制 -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
亲自试一试 »