ZUI
  • examples
    • alerts
    • article
    • breadcrumb
    • button-groups
    • buttons
    • cards
    • carousel
    • chosen
    • collapse
    • colorset
    • comment
    • dropdowns
    • forms
    • grid
    • icons
    • input-groups
    • kindeditor
    • labels
    • Lightbox
    • list-group
    • list
    • modals
    • navbars
    • navs
    • pager
    • panels
    • popovers
    • progress
    • tables
    • tabs
    • textbox
    • tooltip
    • type
  • NEXT

轮播

使用方法一:通过data属性可以很容易的控制轮播的定位。 data-slide 可以接受控制播放位置的 prev 或 next 关键字。另外,还可以通过 data-slide-to 传递以 0 开始的幻灯片下标。 data-ride="carousel" 属性用来标记在页面加载之后即开始启动的轮播组件。

使用方法二:通过js手动启动轮播组件:$('.carousel').carousel()

类型

基本类型

First slide

我是第一张幻灯片

天下熙熙皆为利来~

Second slide

我是第二张幻灯片

天下攘攘皆为利往~

Third slide

我是第三张幻灯片

最后一张咯~

变化

选项

可以将选项通过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…})