走马灯Carousel
内容与数据展示在同一个位置轮流展示多屏内容
走马灯常用于宣传图片和新手引导，但排在后面的内容容易被忽略。重要信息不要只放在轮播里；自动播放时应允许暂停，并提供清楚的切换和位置提示。
夏季新品发布会
城市巡展报名中
森林团建回顾
什么时候用
- 首页 Banner 轮播：运营活动、主推内容夏季新品发布会
- 新手引导：分几屏介绍核心功能第 2 步 · 邀请团队成员
- 商品多图：左右切换看不同角度商品图
- 张数克制（3~5 张），带指示点和切换箭头3 / 3
什么时候不用
- 把重要信息放第 2 张以后，大多数人翻不到第 1 张
- 一轮七八张还不给指示点，用户直接迷路…
- 只是并列展示几个入口 → 平铺成网格更直接4 个入口挤进轮播，得翻 4 次
- 在表单 / 正文里塞轮播，打断填写和阅读林小hu轮播广告表单里塞轮播，填写被打断
组成结构 · Anatomy
‹›
1走马灯Carousel整个轮播区域的容器
2切换箭头Arrow左右翻页
3轮播项Slide每一屏的内容
4指示点Dots告诉用户第几张、共几张
常见变体 · Variants
滑动切换Slide
‹
›
默认款，左右翻看多张图
淡入淡出Fade
整屏 Banner 切换，过渡更柔和
卡片式Card
露出前后一张边角，暗示还能翻
典型使用场景
首页 Banner
新手引导
第 2 步 · 邀请团队成员
把同事拉进来，协作效率翻倍
商品多图浏览
奶油色陶瓷猫碗 加高护颈款
¥49.00
限时 8 折
活动运营位
发现