Bootstrap JS Carousel

JS Carousel (carousel.js)

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

学习更多有关 Carousel 的知识, 请访问本站的 Bootstrap 轮播/幻灯片教程.

注意:Internet Explorer 9 及更早版本不支持 Carousel(因为它们使用 CSS3 转换和动画来实现幻灯片效果)。


Carousel 插件类

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

通过 data-* 属性

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

data-slidedata-slide-to 指定滑动那到哪里。

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

实例
  1. <!-- Carousel -->
  2. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  3. <!-- Carousel Indicators -->
  4. <li data-target="#myCarousel" data-slide-to="1"></li>
  5. <!-- Carousel Controls -->
  6. <a class="left carousel-control" href="#myCarousel" data-slide="prev">

通过 JavaScript

手动:

实例
  1. // Activate Carousel
  2. $("#myCarousel").carousel();
  3. // Enable Carousel Indicators
  4. $(".item").click(function(){
  5. $("#myCarousel").carousel(1);
  6. });
  7. // Enable Carousel Controls
  8. $(".left").click(function(){
  9. $("#myCarousel").carousel("prev");
  10. });

Carousel Options

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

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

备注: 将 interval 设置为 false 来停止项自动滑动
使用 JS
使用 data
pause字符串, 或 false"hover"当鼠标指针进入 Carousel 时,暂停轮播进行下一张幻灯片,当鼠标指针离开 Carousel 时,继续滑动

备注: 将 pause 设置为 false 则鼠标悬浮 Carousel 时不会停止轮播
使用 JS
Using data
wrapbooleantrue指定 Carousel 是应连续浏览所有幻灯片,还是应在最后一张幻灯片上停止

  • true - 永久轮播
  • false - 到最后一项时停止
使用 JS
使用 data

Carousel 方法

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

方法描述试一试
.carousel(options)使用一个选项激活 Carousel。有关有效值,请参见上面的选项试一试
.carousel("cycle")从左到右遍历 Carousel 轮播项试一试
.carousel("pause")阻止 Carousel 遍历项试一试
.carousel(number)转到指定的项(从 0 开始:第一项为 0,第二项为 1,以此类推)试一试
.carousel("prev")转到前一项试一试
.carousel("next")转到下一项试一试

Carousel 事件

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

事件描述试一试
slide.bs.carousel在 Carousel 轮播即将从一个项滑动到另一个项时发生试一试
slid.bs.carousel当轮播从一个项滑动到另一个项时发生试一试

更多实例

轮播文字说明

为每一个 <div class="item"> 都添加一个 <div class="carousel-caption"> 来给每个轮播项都创建文字说明:

实例
  1. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  2. <!-- Indicators -->
  3. <ol class="carousel-indicators">
  4. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  5. <li data-target="#myCarousel" data-slide-to="1"></li>
  6. <li data-target="#myCarousel" data-slide-to="2"></li>
  7. <li data-target="#myCarousel" data-slide-to="3"></li>
  8. </ol>
  9. <!-- Wrapper for slides -->
  10. <div class="carousel-inner" role="listbox">
  11. <div class="item active">
  12. <img src="img_chania.jpg" alt="Chania">
  13. <div class="carousel-caption">
  14. <h3>Chania</h3>
  15. <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  16. </div>
  17. </div>
  18. <div class="item">
  19. <img src="img_chania2.jpg" alt="Chania">
  20. <div class="carousel-caption">
  21. <h3>Chania</h3>
  22. <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  23. </div>
  24. </div>
  25. <div class="item">
  26. <img src="img_flower.jpg" alt="Flower">
  27. <div class="carousel-caption">
  28. <h3>Flowers</h3>
  29. <p>Beautiful flowers in Kolymbari, Crete.</p>
  30. </div>
  31. </div>
  32. <div class="item">
  33. <img src="img_flower2.jpg" alt="Flower">
  34. <div class="carousel-caption">
  35. <h3>Flowers</h3>
  36. <p>Beautiful flowers in Kolymbari, Crete.</p>
  37. </div>
  38. </div>
  39. </div>
  40. <!-- Left and right controls -->
  41. <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  42. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  43. <span class="sr-only">Previous</span>
  44. </a>
  45. <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  46. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  47. <span class="sr-only">Next</span>
  48. </a>
  49. </div>