Vorher-Nachher-Slider-Generator
Erstellen Sie direkt in Ihrem Browser einen interaktiven Vergleichsregler für zwei Bilder (vorher/nachher), sehen Sie sich die Vorschau live an und übernehmen Sie anschließend den HTML/CSS-Code für Ihre eigene Website.
So funktioniert es
Das „Nachher“-Bild wird in voller Größe im Hintergrund angezeigt, während das „Vorher“-Bild darüberliegt, und zwar in einem Container, dessen Breite von einem unsichtbaren Regler gesteuert wird: Wenn Sie den Regler ziehen, wird das darunterliegende Bild nach und nach sichtbar. Die Vorschau oben funktioniert direkt im Tool, und der erzeugte Code setzt dasselbe Prinzip in reinem HTML/CSS um, ohne externe JavaScript-Abhängigkeit.
Wie binde ich den erzeugten Code in meine Website ein?
Kopieren Sie den erzeugten HTML-Code und ersetzen Sie die beiden src-Attribute durch die tatsächlichen Pfade Ihrer Bilder (auf Ihrem Server gehostet) oder durch deren vollständige Base64-codierte Versionen. Der im Code enthaltene native Regler input[type=range] sorgt für die Interaktivität, ganz ohne zusätzliche Bibliothek.
Kann ich die Beschriftungen „Vorher“ und „Nachher“ ändern?
Ja, mit den Beschriftungsfeldern können Sie den Text anpassen, der in jeder Ecke des Sliders angezeigt wird (zum Beispiel „Vor dem Umbau“ / „Nach dem Umbau“ oder Datumsangaben) – sowohl in der Vorschau als auch im erzeugten Code.
Die Vorschau und die Codeerzeugung erfolgen vollständig in Ihrem Browser: Ihre Bilder werden niemals an einen Server gesendet.