新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

幻灯片,一般用来轮播一些图片。注意,在 v1.3.0 及以上版本中才可用。

  • 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中

通过data属性自动加载

.sui-carousel 容器上增加了一个 data-ride="carousel",则会自动初始化幻灯片。注意,这是在 onload 事件时加载的,所以onload之后异步加载的内容你仍然需要手动初始化。
有两个属性可以用来控制轮播,分别是 data-slidedata-slide-to。其中 data-slide 可以设置为 "prev" 或者 "next",分别表示向上一个和下一个滚动。 data-slide-to 可以设置为一个数字,从0开始,点击之后定位到对应的幻灯片元素。
JS配置项 interval, pause 和 autoStart 可以通过 data-x 属性来在HTML中设置。比如data-interval 可以用来控制轮播间隔时间,单位毫秒,默认是 5000 ; data-pause 可以用来设置暂停的出发动作,默认是 "hover", data-auto-start 可以用来设置是否自动开始播放, 默认为 true。


              

通过JS控制

如果你没有使用 data-ride 自动加载,则可以使用 $('.sui-carousel').carousel(config) 来通过JS初始化。

初始化配置

初始化的时候你可以传入一个配置对象,有两个参数 interval 和 pause 可以配置,和 data-x 中的配置是对应的。如下所示
  • interval: 轮播间隔,默认是 5000 毫秒
  • pause: 触发暂停的事件,默认是 "hover"
  • autoStart: 是否自动开始播放

可用方法

有如下方法可以调用:

  • .carousel('cycle'): 开始轮播
  • .carousel('pause'): 暂停轮播
  • .carousel(number): 从0开始,定位到某一张幻灯片。
  • .carousel('prev'): 上一个
  • .carousel('next'): 下一个