前后对比滑块 <CompareSlider />
两张同构图的图片叠在一起，中间一条带把手的分割线。每按一次 →，分割线滑到下一个位置，下方对应的说明点亮。
Template and style descriptions are currently available in Chinese only.
- Group
- 对比 · 同一画面的前后变化
- Component
CompareSlider·#compare-slider- Interaction
- build：分割线逐步滑动，说明逐条点亮
Good for
- 改版前后、治理前后、季节变化等同机位对比
- 想让观众“拉开帘子”看变化
Avoid when
- 两张图构图不同：用 BeforeAfter 或 DuoCards
- 要比较数字：用图表
Content limits
| 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 里写明“示意” |
Fields
| Field | Type | |
|---|---|---|
kicker / title / lead / source | SlideBase | 同通用字段 |
before · required | { image, label } | 左侧（分割线左边显示） |
after · required | { image, label } | 右侧 |
start | number | 第 0 步分割线位置，默认 50 |
stops · required | { at, note }[] | 每步的位置和说明；不逐步时停在最后一个位置 |
Example
<CompareSlider kicker="对照" title="同一片礁，白化前后" before={{ image: a, label: '健康' }} after={{ image: b, label: '白化' }} stops={[{ at: 82, note: '…' }, { at: 18, note: '…' }]} />