Image Comparer
Compares two images with a draggable slider, or a crossfade. Drag the handle (or use arrow keys).
Slider
html
| 1 | <nana-image-comparer position="40"> |
| 2 | <img slot="before" src="/before.jpg" alt="Before" /> |
| 3 | <img slot="after" src="/after.jpg" alt="After" /> |
| 4 | </nana-image-comparer> |
Fade
Import
ts
| 1 | import "@nana-tec/ui-components/image-comparer"; |
Props
| Attribute | Type | Default |
|---|---|---|
position | number | 50 |
variant | slider | fade | slider |