BeforeAfterSlider
InhaltBildvergleich mit Drag-Handle: Das Vorher-Bild wird per clip-path beschnitten, der Trenner lässt sich mit Maus, Touch und Tastatur verschieben (ARIA-Slider). Ideal für Handwerker und Renovierungen.
Live Demo
Ziehen Sie den Griff oder nutzen Sie die Pfeiltasten (Demo: gleiches Motiv, links entsättigt).
Props / API
| Prop | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
beforeImage | string | Ja | — | URL des Vorher-Bilds |
afterImage | string | Ja | — | URL des Nachher-Bilds |
beforeLabel | string | Nein | 'Vorher' | Label links oben |
afterLabel | string | Nein | 'Nachher' | Label rechts oben |
initialPosition | number | Nein | 50 | Startposition des Trenners (0–100) |
aspectRatio | string | Nein | '16/10' | Seitenverhältnis des Containers |
handleColor | string | Nein | '#ffffff' | Farbe von Trenner und Griff |
borderRadius | number | Nein | 16 | Eckenradius in Pixeln |
className | string | Nein | — | Zusätzliche CSS-Klasse |
Code-Beispiel
<BeforeAfterSlider
beforeImage="/images/bad-vorher.jpg"
afterImage="/images/bad-nachher.jpg"
beforeLabel="Vorher"
afterLabel="Nachher"
aspectRatio="16/10"
/>