轮播
使用方法一:通过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…})
|