轮播
使用方法一:通过data属性可以很容易的控制轮播的定位。 data-slide 可以接受控制播放位置的
prev 或 next 关键字。另外,还可以通过 data-slide-to 传递以 0
开始的幻灯片下标。 data-ride="carousel" 属性用来标记在页面加载之后即开始启动的轮播组件。
使用方法二:通过js手动启动轮播组件:$('.carousel').carousel()
类型
基本类型
变化
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-interval=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| interval | number | 5000 | 幻灯片轮换的等待时间。如果为false,轮播将不会自动开始循环。 |
| pause | string | "hover" | 鼠标停留在幻灯片区域即暂停轮播,鼠标离开即启动轮播。 |
| wrap | boolean | true | 轮播是否持续循环。 |
方法和事件
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-interval=""。
| 方法 | 描述 |
|---|---|
.carousel(options) |
初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。 |
.carousel('cycle') |
从左到右循环各帧。 |
.carousel('pause') |
停止轮播。 |
.carousel(number) |
将轮播定位到指定的帧上(帧下标以0开始,类似数组)。 |
.carousel('pre') |
返回上一帧。 |
.carousel('next') |
转到下一帧。 |
Bootstrap的轮播组件暴露了两个事件用于监听。
| 事件类型 | 描述 |
|---|---|
| slide.bs.carousel | 此事件在slide方法被调用之后立即出发。 |
| slid.bs.carousel | 当所有幻灯片播放完之后被触发。 |
$('#myCarousel').on('slide.bs.carousel', function() {// do something…})
|
|