Vorher-Nachher-Slider für die Website
Füge die Adressen der beiden Fotos ein (gleiche Größe und gleicher Bildausschnitt). Ziehe den Teiler in der Vorschau und kopiere den Code.
So geht’sVorher und Nachher mit ziehbarem Teiler
Verfügbar auf: 
Vorher-Nachher-Slider für die Website: wofür es gut ist
Bei Dienstleistungen, die das Aussehen von etwas verändern, wie Barbershop, Autopflege, Renovierung oder Reinigung, überzeugt es mehr als jeder Text, Vorher und Nachher im selben Foto zu zeigen.
Füge die beiden Fotos ein und der Generator baut den Vergleich mit dem Teiler, der mit Finger oder Maus gezogen wird, Beschriftungen, Startposition und Farbe. Darunter ist der Teiler ein input range, daher funktioniert er mit den Pfeiltasten und wird vom Screenreader angesagt; der Zuschnitt erfolgt per clip-path, ohne Bibliothek.
So geht’s
- Füge die Adressen der Vorher- und Nachher-Fotos ein.
- Schreibe die Beschriftungen, die Beschreibung und die Startposition.
- Kopiere den Code und füge ihn in die Seite ein.
Wann nutzen
- Barbershop und Schönheitssalon.
- Autopflege und Karosseriearbeiten.
- Renovierung, Malerarbeiten und Reinigung.
Häufige Fragen
Für welche Geschäfte ist das gedacht?
Für jede Dienstleistung, die das Aussehen von etwas verändert: Barbershop, Salon, Autopflege, Renovierung, Malerarbeiten, Polsterreinigung, ästhetische Zahnmedizin, Landschaftsbau. Den Unterschied im selben Foto zu sehen überzeugt mehr als zwei einzelne Fotos.
Wie ist es barrierefrei?
Der Teiler ist darunter ein echtes input range: Er lässt sich mit den Pfeiltasten bewegen, und der Screenreader sagt den Prozentwert an. Beide Fotos haben Alternativtext.
Müssen die Fotos gleich sein?
Sie müssen dasselbe Seitenverhältnis und möglichst denselben Bildausschnitt haben, vom selben Ort aufgenommen. Bei unterschiedlichen Verhältnissen wird das obere Foto zugeschnitten (object-fit: cover).
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.