IMAGE & MEDIA
前后对比滑块Before/After Slider
拖动中线左右滑，两张图实时分割对比——修图、装修、改造类内容的王牌。
效果预览
◂▸
适合用在哪
修图工具、设计改造案例、美容/健身前后、产品升级对比。
容易踩的坑
- 把手只绑定 mousemove，移动端触摸拖动与页面滚动冲突，用户拉不动。
- 两张图分辨率或裁切不一致，中线两侧错位，对比结论失去可信度。
- 把手缺少 role=slider 和 aria-valuenow，读屏用户不知道当前比例。
设计提示词 · Prompt
前后对比滑块（Before/After Slider）：两层绝对定位图片，上层（Before）用 clip-path:inset(0 calc(100% - var(--x)) 0 0) 或 width 裁切；一条 2-3px 白色中线 + 中央圆形拖拽把手（左右箭头图标）。拖动把手/整图区域更新 --x。必须提供键盘可达（方向键 5% 步进）。自动演示模式：页面进入视口后自动从 30% 滑到 70% 一次，暗示可拖。两图必须同尺寸同位置对齐，否则对比失真。加 BEFORE/AFTER 角标防误读。
Before/After Slider: Two absolutely positioned image layers; clip the top layer (Before) with clip-path: inset(0 calc(100% - var(--x)) 0 0) or by width; a 2-3px white center line + a circular drag handle in the middle (left/right arrow icons). Dragging the handle or anywhere on the image updates --x. Keyboard access is mandatory (arrow keys step 5%). Auto-demo mode: once the section enters the viewport, auto-slide from 30% to 70% once to hint that it's draggable. Both images must be the same size and aligned in the same position, or the comparison is distorted. Add BEFORE/AFTER corner labels to prevent misreading.
常见搭配
同一页面里经常和「前后对比滑块」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-ba"> <div class="d-ba__after"></div> <div class="d-ba__before"></div> <div class="d-ba__line"></div> <div class="d-ba__knob">◂▸</div> </div>