走马灯Carousel
你可能会说
首页大图想几张轮着播，自动切换，还能点左右箭头。
走马灯是在同一内容区域轮流展示多张幻灯片的轮播组件首页宣传内容或新手引导可用走马灯切换多张幻灯片。重要信息不能只放在后面；自动播放时必须允许暂停，并提供当前位置和切换入口。
你可以这样告诉 AI Agent
请把手机商品图做成可手动控制的走马灯，显示当前张数、前后按钮和缩略图，滑动与键盘也能切换。默认不要自动播放；验证首尾边界、图片加载失败和 1 张图片时的状态。
什么时候用
- 首页 Banner 轮播：运营活动、主推内容夏季新品发布会
- 新手引导：分步骤介绍核心功能第 2 步 · 邀请团队成员
- 商品多图：左右切换看不同角度商品图
- 内容数量保持克制，带指示点和切换箭头3 / 3
什么时候不用
- 把重要信息只放在靠后的轮播项，未切换的用户无法看到第 1 张
- 轮播内容较多又没有当前位置提示，用户无法判断浏览进度…
- 几个并列入口通常应平铺为网格，让用户同时看到全部选项4 个入口挤进轮播，得翻 4 次
- 在表单 / 正文里塞轮播，打断填写和阅读林小hu轮播广告
组成结构 · Anatomy
‹›
整个轮播区域的容器
左右翻页
每个轮播项承载的内容
告诉用户第几张、共几张
常见变体 · Variants
滑动切换Slide
‹
›
默认款，左右翻看多张图
淡入淡出Fade
整屏 Banner 切换，过渡更柔和
卡片式Card
露出前后一张边角，暗示还能翻
典型使用场景
首页 Banner
新手引导
第 2 步 · 邀请团队成员
邀请同事加入项目，共同查看和编辑
商品多图浏览
奶油色陶瓷猫碗 加高护颈款
¥49.00
限时 8 折
活动运营位
发现
延伸阅读 · 权威出处
快速练习