SOCIAL PROOF
评价轮播Testimonial Carousel
评价卡 + 左右箭头 + 圆点指示器，一次只看一条，信息够大才读得进去。
效果预览
"上线的第一个月，我们团队的人均产出翻了一倍。"
苏苏晚白泽工作室 · 主理人
适合用在哪
首页社会证明区、落地页中段、详情页口碑区。
容易踩的坑
- 自动播放没有暂停按钮，违反 WCAG 2.2.2，读到一半的评价被强行切走。
- 圆点指示器只有 8px 且无 aria-label，移动端难点中，读屏也不知道是第几条。
- 引文超过 80 字仍放大字号，卡片高度来回跳动，切换时整页布局抖动。
设计提示词 · Prompt
评价轮播（Testimonial Carousel）：主卡一次性显示一条完整评价（头像 48px + 五星 + 大号引文 18-22px + 签名），左右各露出相邻卡的 8-12% 边缘暗示可滑。切换用 scroll-snap 或 transform 滑动（400ms）。自动播放 6-8s、悬停暂停、交互后停止自动播。评价多于 5 条时加分类筛选（按使用场景）。引文要"有画面感"（具体动作 + 具体数字），头像用真实照片。箭头按钮 40px 圆形、悬停加深。
Testimonial Carousel: the main card shows one complete testimonial at a time (48px avatar + five stars + large quote at 18-22px + signature), with 8-12% of the neighboring cards peeking out on each side to hint that it's swipeable. Transition with scroll-snap or a transform slide (400ms). Autoplay every 6-8s, pause on hover, and stop autoplay after any interaction. With more than 5 testimonials, add category filters (by use case). Quotes should be vivid (a concrete action + a concrete number); use real photos for avatars. Arrow buttons are 40px circles that darken on hover.
常见搭配
同一页面里经常和「评价轮播」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-testicaro">
<div class="d-testicaro__card">
<p class="d-testicaro__q">"上线的第一个月，我们团队的人均产出翻了一倍。"</p>
<div class="d-testicaro__who"><span class="d-av d-av--sm">苏</span><span><b>苏晚</b><span>白泽工作室 · 主理人</span></span></div>
</div>
<div class="d-testicaro__nav">
<button class="d-testicaro__arr">‹</button>
<span class="d-testicaro__dots"><i></i><i></i><i></i></span>
<button class="d-testicaro__arr">›</button>
</div>
</div>