Carousel 走马灯
在区域内展示相同类型的图片等内容。
基础用法
使用 z-carousel
标签就得到了一个走马灯。将要展示的图片路径放到 data
属性内即可。
指示器
通过 indicator-position
属性可以自定义指示器的显示位置,可选值为 none
、outside
,默认情况下指示器在内部显示。 indicator-type
属性能够自定义指示器的形状。
切换箭头
可以通过 arrow
属性设置箭头的显示时机,默认值为 hover
,鼠标悬浮后才会显示箭头,将该值设置为 always
可以让箭头一直显示。
布局
通过设置 direction
属性可以更改走马灯的布局,默认情况下为 horizontal
。 通过设置 direction
为 vertical
可以让走马灯垂直显示。
Carousel API
Carousel 属性
属性名 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 需要展示的图片路径 | string[] | — | [] |
height | carousel 的高度 | string | — | — |
initial-index | 起始的 index | number | — | 0 |
trigger | 指示器的触发方式 | string | hover / click | hover |
autoplay | 是否开启自动切换 | boolean | — | true |
interval | 自动切换的间隔时间 | number | — | 3000 |
indicator-position | 指示器显示的位置 | string | outside / none | — |
indicator-type | 指示器的类型 | string | rect / circle | circle |
arrow | 切换箭头的显示时机 | string | always / hover / never | hover |
loop | 是否循环显示 | boolean | - | true |
direction | carousel 的布局方式 | string | horizontal / vertical | horizontal |
pause-on-hover | 鼠标悬浮时是否停止自动切换 | boolean | - | true |
Carousel 事件
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换时触发 | 目前的索引,原来的索引 |
Carousel 方法
方法名 | 说明 | 参数 |
---|---|---|
setActiveItem | 手动切换 | 需要切换到的索引 |
prev | 切换至上一张 | — |
next | 切换至下一张 | — |