Carousel 走马灯
在有限空间内循环展示一组图片或文本。
基础用法
将 u-carousel 与 u-carousel-item 组合即可使用。每页内容可完全自定义，放在 u-carousel-item 内。默认鼠标悬停指示器时切换；将 trigger 设为 click 则仅在点击指示器时切换。
Switch when indicator is hovered (default)
Switch when indicator is clicked
动态模糊
为走马灯增加动态模糊，使过渡更顺滑、更有动感。
开启动态模糊可增强动感与顺滑度。默认 motion-blur 为 false，开启后视觉更生动。
Motion blur the switch (default)
Vertical effect
指示器
可将指示器放在容器外侧。
indicator-position 控制指示器位置：默认在容器内；outside 在外侧；none 隐藏。
圆点指示器
可将指示器改为圆点样式。
indicator-type 可控制指示器视觉类型：默认 line；设置为 dot 时显示 10px 圆点。
切换箭头
可控制箭头显示时机。
arrow 控制箭头显示：默认悬停时出现；always 常显；never 常隐。
高度自适应
当 carousel 的 height 为 auto 时，高度随当前 carousel-item 内容变化。
each carousel-item has a different height
卡片模式
页面较宽、高度有限时，可使用卡片模式。
设置 type 为 card 启用卡片模式。除外观外，与常规模式的主要区别是：卡片模式下点击两侧幻灯片可直接切换。
垂直排列
默认 direction 为 horizontal；设为 vertical 可纵向展示。
normal vertical layout
card vertical layout
走马灯 API
走马灯 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 容器高度 | string | '' |
| initial-index | 初始激活幻灯片索引（从 0 开始） | number | 0 |
| trigger | 指示器触发方式 | enum | hover |
| autoplay | 是否自动轮播 | boolean | true |
| interval | 自动轮播间隔（毫秒） | number | 3000 |
| indicator-position | 指示器位置 | enum | '' |
| indicator-type | 指示器视觉类型 | enum | line |
| arrow | 箭头显示策略 | enum | hover |
| type | 走马灯类型 | enum | '' |
| card-scale | 卡片模式下两侧缩略图的缩放比例 | number | 0.83 |
| loop | 是否循环播放 | boolean | true |
| direction | 展示方向 | enum | horizontal |
| pause-on-hover | 悬停时是否暂停自动播放 | boolean | true |
| motion-blur | 是否开启动态模糊 | boolean | false |
走马灯 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 激活项变化时触发，参数为新索引与旧索引 | Function |
走马灯 插槽
| 名称 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | 走马灯子项 |
走马灯 暴露
| 名称 | 说明 | 类型 |
|---|---|---|
| activeIndex | 当前激活项索引 | number |
| setActiveItem | 手动切换幻灯片；参数为从 0 开始的索引，或对应 u-carousel-item 的 name | Function |
| prev | 上一张 | Function |
| next | 下一张 | Function |
走马灯项 API
走马灯项 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 幻灯片名称，可用于 setActiveItem | string | '' |
| label | 指示器对应展示文案 | string / number | '' |
走马灯项 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |