轮播
Carousel
别名:轮播图片轮播轮播图banner 切换跑马灯切换carouselslider gallery
这是什么
用水平滑动的轨道展示一组内容，同一时刻只突出一项，其余滑出视野或露出边缘作暗示。通过分页点、 箭头或自动播放切换，常用于首屏 Banner、图片画廊与推荐位。适合「一组同类内容、逐个浏览」的场景， 不适合需要并排对照的信息。
交互实验室
试一试，再决定怎么用用键盘或箭头浏览完所有项目，观察焦点是否被正确管理。
正在加载实验室…
使用时关注什么
- 01切换后当前项有可见指示
- 02键盘左右键可切换
✓ 适用场景
- 一组同类内容需要逐个浏览（Banner、图集、推荐位）
- 横向空间有限，又想保留「还有更多」的暗示
- 图片或卡片为主、文字说明简短
✕ 不适用场景
- 用户需要并排对照多个项目（用卡片网格或表格）
- 内容只有三五条且全部重要（直接平铺，别藏起来）
- 关键操作或表单藏在某一页里（切换会打断任务）
常见形式
分页点
Dot pagination
底部小圆点指示位置，点按直达，最省空间
箭头
Arrow controls
左右箭头逐步切换，桌面端最常见
自动播放
Autoplay with pause
定时前进，悬停或聚焦暂停；必须提供暂停入口
实现要点
scroll-snap-typeoverflow-xtransform轨道用 overflow-x: auto + scroll-snap-type: x mandatory，项目 scroll-snap-align: center， 纯 CSS 即可滑动；控件切换则用 transform: translateX(-index * 100%)。当前项用 aria-hidden 或 inert 降低朗读噪音，容器标 aria-roledescription="carousel"，切换时 aria-live="polite" 播报「第 n / N 项」。自动播放必须提供暂停按钮，并在 prefers-reduced-motion 下关闭。
平台 API
aria-roledescription="carousel"scroll-snap-typearia-live代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA APG | Carousel |
| shadcn/ui | Carousel (Embla) |
| MUI | Carousel |
相关概念
用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件替代方案一条内容带在水平方向匀速循环滚动，首尾无缝衔接。 用于 logo 墙、合作方名单、公告与促销横幅——用"连续流动"表达数量多与不间断， 而不是引导用户逐条读完。
动效替代方案用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件搭配使用