仅桌面端保证样式
Carousel 走马灯
轮播容器:自动播放、指示器(click / hover 触发)、悬停箭头、垂直方向与手动控制。子项必须使用 eb-carousel-item。
基础用法
公告一:系统升级通知
公告二:季度报表已生成
公告三:新版操作手册上线
指示器位置与切换箭头
indicator-position="outside" 指示器移到容器外;arrow="always" 常显切换箭头;trigger="hover" 悬停即切换。
第 1 帧(悬停出现左右箭头由 arrow 控制)
第 2 帧(悬停出现左右箭头由 arrow 控制)
第 3 帧(悬停出现左右箭头由 arrow 控制)
第 4 帧(悬停出现左右箭头由 arrow 控制)
手动控制(程序化切换)
通过 ref 暴露的 setActiveItem / prev / next 程序化切换,常与外部按钮联动:
轮播帧 1
轮播帧 2
轮播帧 3
垂直方向
垂直滚动帧 1
垂直滚动帧 2
垂直滚动帧 3
Carousel API
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| initial-index | Number | 0 | 初始页 |
| height | String | — | 高度(必填,如 160px) |
| trigger | String | click | 指示器触发:click / hover |
| autoplay | Boolean | true | 自动播放 |
| interval | Number | 3000 | 播放间隔(ms) |
| indicator-position | String | — | outside 容器外 / none 隐藏 |
| arrow | String | hover | 箭头显示:always / hover / never |
| loop | Boolean | true | 循环播放 |
| direction | String | horizontal | horizontal / vertical |
| pause-on-hover | Boolean | true | 悬停暂停 |
事件:change(index, prevIndex);暴露 setActiveItem(index \| name) / prev() / next();子项使用 eb-carousel-item(可传 name)。