- 分组
- 对比 · 同一画面的前后变化
- 组件
CompareSlider·#compare-slider- 交互
- build：分割线逐步滑动，说明逐条点亮
适合
- 改版前后、治理前后、季节变化等同机位对比
- 想让观众“拉开帘子”看变化
不适合
- 两张图构图不同：用 BeforeAfter 或 DuoCards
- 要比较数字：用图表
内容上限
| 1 | title ≤ 1 行 × 16 字 |
| 2 | lead ≤ 40 字 |
| 3 | before.label / after.label ≤ 8 字 |
| 4 | stops 1–3 步：at 为 0–100，note ≤ 24 字 |
| 5 | 两张图尺寸和构图必须一致；生成图要在 note 或 credit 里写明“示意” |
字段
| 字段 | 类型 | |
|---|---|---|
kicker / title / lead / source | SlideBase | 同通用字段 |
before · 必填 | { image, label } | 左侧（分割线左边显示） |
after · 必填 | { image, label } | 右侧 |
start | number | 第 0 步分割线位置，默认 50 |
stops · 必填 | { at, note }[] | 每步的位置和说明；不逐步时停在最后一个位置 |
示例代码
<CompareSlider kicker="对照" title="同一片礁，白化前后" before={{ image: a, label: '健康' }} after={{ image: b, label: '白化' }} stops={[{ at: 82, note: '…' }, { at: 18, note: '…' }]} />