Carousel 走马灯
轮播组件,对齐 Ant Design Carousel。
示例
可访问性
- 根节点默认使用
role="region"和aria-roledescription="carousel",可通过aria-label为页面中的多个轮播提供清晰名称。 - 每个 slide 会暴露为
role="group",并使用1 of 3这类位置标签帮助读屏用户理解当前位置。 - 非自动播放时,当前 slide 位置会通过
aria-live="polite"轻量播报;自动轮播运行中会切换为aria-live="off",避免连续轮播打断读屏。 - 启用
autoplay且存在多个 slide 时,轮播会提供 Stop/Start 控制按钮。焦点进入轮播控制区会停止自动轮播;鼠标悬停时会临时暂停,移出后如果用户未显式停止则继续轮播。 - 指示点会用
aria-current="true"标记当前项;当轮播或其控制按钮获得焦点时,支持ArrowLeft、ArrowRight、Home、End切换。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| items | 轮播内容 | ReactNode[] | - |
| autoplay | 自动播放 | boolean | false |
| autoplaySpeed | 自动播放速度(ms) | number | 3000 |
| dots | 显示指示点 | boolean | true |
| arrows | 显示箭头 | boolean | true |