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 | 切换至下一张 | — |