走马灯
Carousel
初级通用走马灯（Carousel）是一种在同一块区域里依次展示多项内容的组件，用户通常能切换当前看到的图片或卡片。它解决的是展示空间有限、又想让用户浏览一组同类内容的问题，比如在商品详情页查看多张商品图。
你可能会说：「我想让首页几张活动卡片共用一个位置，用户可以点左右箭头逐张查看。」
动手看看跑鞋详情页的商品图
云迹轻跑鞋商品图片
1 / 3
三张商品图共用一块固定区域。调节「当前图片」模拟翻页，看看图片、页码和下方指示点怎样一起变化；也可以悬停或按住箭头，感受操作反馈。
要点走马灯怎么让一组内容共用一个位置？
- 1
先确定每一项展示什么
走马灯里放的是一组同类内容，比如商品图片或活动卡片。你可以让每次只看到一项，也可以露出相邻项的一部分；后者能提示用户，这里还有内容可看。
- 2
让用户看得见也切得动
箭头、位置指示点或缩略图能告诉用户当前看到哪一项，以及怎样切换。做手机端页面时，还可以支持手指滑动；但如果只靠滑动，部分用户可能发现不了后面的内容。
- 3
自动播放不是必备功能
走马灯可以自动切换，也可以完全由用户控制。如果卡片上有需要阅读的文字，自动切换可能在用户读完前就把它移走，所以我们通常先判断内容是否适合轮播，再决定要不要自动播放。
容易混淆的地方
走马灯是在固定区域里切换一组内容；标签页更像是在几个明确命名的内容区之间切换，用户可以直接按名称找目标。它也不同于分页：分页通常把大量结果分成多页，方便继续浏览和定位，不只是轮流展示几张卡片。
什么时候用
适合用
- 商品详情页有多张不同角度的照片，用户想在当前页面逐张查看，而不用打开多个页面。
- 网站首页只有一块活动展示位，但有几项同类活动需要让用户依次浏览。
- 作品集页面想在同一处展示一组项目截图，让用户切换查看每张图的细节。
不适合用
- 用户需要同时比较几款套餐的价格和权益时，改用并排卡片或表格，避免来回切换记内容。
- 后台有大量订单需要查找和处理时，改用可筛选的列表或表格，走马灯不方便定位具体订单。
- 页面只有一条重要通知时，直接展示通知内容，不必为了单条信息做走马灯。
练一练选一个答案，看看解释
你在做一个商品详情页：有六张商品照片，用户需要逐张查看，但不需要同时比较。展示区宽度只够放一张大图。你会选哪种方案？
让 AI 帮你做复制给 AI Agent 直接用
请在商品详情页做一个图片走马灯，展示同一商品的多张照片。桌面端提供前后箭头，手机端支持手指滑动，并显示可点击的缩略图和当前图片状态。不自动播放；切换图片时保留页面其他内容的位置。