Appearance
Carousel 走马灯
在有限空间内，循环播放同一类型的图片、文字等内容。
基础用法
最基本的轮播图用法。
结合 fyo-carousel-item 标签使用。
指示器位置
可以将指示器显示在容器外部。
indicator-position 属性定义了指示器的位置。默认情况下，它会显示在内部，设置为 outside 则显示在外部；设置为 none 则不显示指示器。
指示器样式
可以将指示器显示为不同类型，或放置在不同位置。
indicator-type 属性定义了指示器的类型，可选值为 dot（默认）和 line。 indicator-position 属性定义了指示器的位置，除了原有的 outside 和 none，现在还支持 top、bottom、left、right 四个方向。
切换箭头
可以设置切换箭头的显示时机。
arrow 属性定义了切换箭头的显示时机。always 为一直显示；hover 为悬停显示；never 为不显示。
卡片模式
当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片模式。 将 type 属性设置为 card 即可启用卡片模式。
3D 卡片模式 (特色)
更加立体的 3D 旋转卡片效果。 将 type 属性设置为 card-3d 即可启用增强的 3D 卡片模式。卡片会有透视和旋转效果，带来更强的视觉冲击力。
进度条指示 (特色)
显示播放进度的可视化条。 设置 progress="bar" 可以在底部显示自动播放的倒计时进度条。
折叠切换效果 (特色)
类似纸张折叠的切换效果。 设置 effect="fold" 启用折叠切换效果。
运动模糊 (特色)
在切换时添加运动模糊效果。 设置 motion-blur 属性为 true。
垂直方向
默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。
Carousel 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 走马灯的高度 | string | — |
| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | 0 |
| trigger | 指示器的触发方式 | 'hover' / 'click' | 'hover' |
| autoplay | 是否自动切换 | boolean | true |
| interval | 自动切换的时间间隔，单位为毫秒 | number | 3000 |
| indicator-position | 指示器的位置 | 'outside' / 'none' / 'top' / 'bottom' / 'left' / 'right' | — |
| indicator-type | 指示器的类型 | 'dot' / 'line' | 'dot' |
| arrow | 切换箭头的显示时机 | 'always' / 'hover' / 'never' | 'hover' |
| type | 走马灯的类型 | 'card' / 'card-3d' | — |
| loop | 是否循环显示 | boolean | true |
| direction | 走马灯展示的方向 | 'horizontal' / 'vertical' | 'horizontal' |
| pause-on-hover | 鼠标悬浮时是否暂停自动切换 | boolean | true |
| effect | 切换效果 | 'slide' / 'fade' / 'fold' | 'slide' |
| progress | 进度条样式 | 'none' / 'bar' | 'none' |
| motion-blur | 是否开启运动模糊 | boolean | false |
Carousel 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |
CarouselItem 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 幻灯片的名字，可用作 setActiveItem 的参数 | string | — |
| label | 该幻灯片所对应指示器的文本 | string | — |