使用方法一:通过data属性可以很容易的控制轮播的定位。 data-slide 可以接受控制播放位置的 prevnext 关键字。另外,还可以通过 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') 转到下一帧。

用于监听的事件

事件类型 描述
slide.zui.carousel 此事件在 slide 方法被调用之后立即出发。
slide.zui.carousel 当所有幻灯片播放完之后被触发。
$('#myCarousel').on('slide.zui.carousel', function() {// do something…})

非常感谢 @snowinfish 为本章节提供演示所用的全部图片。

图片仅供 ZUI 演示使用,未经作者授权,不得用作他用。