MOBILE UI
Peek 轮播Peek Carousel
当前卡片占屏 80%，左右各露出下一张卡的边缘——暗示"还能滑"。
效果预览
上一张的边缘露出来暗示可滑
当前卡片居中scroll-snap-align: center
下一张同样露边
适合用在哪
移动端首页推荐位、课程/商品卡片流、Onboarding 引导。
容易踩的坑
- 卡片宽度设成 100%，相邻卡片完全不露边，用户意识不到可以横滑。
- 自动轮播与手动滑动冲突，用户正在阅读时卡片被强行切走。
- 进度点只是装饰，没有可点击或 aria 标注，读屏用户不知道共有几张。
设计提示词 · Prompt
Peek 轮播（Peek Carousel）：横向滚动容器，卡片宽 78-85% 屏宽、scroll-snap-align:center 强制居中吸附，两侧自然露出相邻卡片边缘（这就是"peek"）。露出的边就是最好的滑动暗示，比任何箭头都有效。当前卡与边缘卡的差异：当前卡全饱和 + 投影，边缘卡降饱和度 10-20%（用 scroll 事件计算或 scroll-driven animation）。配进度点指示器。卡间距 12-16px。第一张卡左侧留 24px 起始边距保证首屏也有 peek 效果。
Peek Carousel: A horizontal scroll container with cards at 78-85% of screen width and scroll-snap-align:center forcing centered snapping, so the edges of adjacent cards naturally peek out on both sides (that's the "peek"). The peeking edge is the best swipe hint, more effective than any arrow. Difference between the current card and edge cards: the current card is fully saturated + shadowed, edge cards are desaturated by 10-20% (computed via scroll events or scroll-driven animation). Add a progress dot indicator. Card gap 12-16px. Leave a 24px starting margin to the left of the first card so the peek effect works on the first screen too.
常见搭配
同一页面里经常和「Peek 轮播」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-peekcaro"> <div class="d-peekcaro__card" style="background:linear-gradient(135deg,#0ea5e9,#4f46e5)"><b>上一张的边缘</b><span>露出来暗示可滑</span></div> <div class="d-peekcaro__card" style="background:var(--i-gd)"><b>当前卡片居中</b><span>scroll-snap-align: center</span></div> <div class="d-peekcaro__card" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><b>下一张</b><span>同样露边</span></div> </div>