uni组件库

在有限空间内，循环播放同一类型的图片、文字等内容。

基础用法

适用广泛的基础用法

默认 Hover 指示器触发

Click 指示器触发
▼显示代码

指示器

可以将指示器的显示位置设置在容器外部

▼显示代码

切换箭头

可以设置切换箭头的显示时机

▼显示代码

卡片化

当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格

▼显示代码

参数

你可以通过修改$.fn.carousel.defaults来修改全局默认配置，也可以在初始化时传入指定配置$(el).carousel({xx: xx})。 参数默认为 Json ，若为数组，则会被当做data赋值。

参数 说明 类型 可选值 默认值
data 具体走马灯内容数组，具体配置见下方【data参数】 array - []
height 走马灯的高度 string - '300px'
initialIndex 初始状态激活的幻灯片的索引，从 0 开始 number - 0
trigger 指示器的触发方式 string click -
autoplay 是否自动切换 boolean - true
interval 自动切换的时间间隔，单位为毫秒 number - 3000
indicatorPosition 指示器的位置 string outside/none -
arrow 切换箭头的显示时机 string always/hover/never 'hover'
type 走马灯的类型 string card -
loop 是否循环显示 boolean - true
change 幻灯片切换时触发，参数为(目前激活的幻灯片的 name，原幻灯片的 name) function - -

data参数

参数 说明 类型 可选值 默认值
name 幻灯片的名字，可用作 set 方法的参数 string - 数组的索引index
label 该幻灯片所对应指示器的文本 string - -
content 该幻灯片所对应内容 string - -

方法

你可以通过调用$(el).carousel('xxx', xxx)来调用已被初始化过的走马灯的方法。

方法名 说明 参数 举例
set 手动切换幻灯片 需要切换的幻灯片的索引，从 0 开始；或相应的 name 值 $(el).carousel('set', 3)
prev 切换至上一张幻灯片 - $(el).carousel('prev')
next 切换至下一张幻灯片 - $(el).carousel('next')

← Collapse 折叠面板 →