> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.
# Vergleich-Schieber
> Veranschauliche Unterschiede zwischen zwei Bildern mit einem interaktiven Slider.
## 
# Allgemeine Beschreibung
Der **Vergleich-Schieber** (oft auch "Vorher-Nachher-Slider" genannt) ist ein interaktives Tool, mit dem Nutzer zwei übereinanderliegende Bilder durch Verschieben eines Trennbalkens direkt vergleichen können. Dies eignet sich hervorragend, um visuelle Veränderungen, Varianten oder Zustände eindrucksvoll zu demonstrieren.
# Einsatzmöglichkeiten (Inspiration)
Du kannst den Vergleich-Schieber für verschiedene Zwecke nutzen:
* **Vorher-Nachher-Effekte:** Zeige die Wirkung von Reinigungsmitteln, Bildbearbeitung oder Renovierungen.
* **Produktvarianten:** Vergleiche zwei Farben oder Ausführungen desselben Artikels.
* **Technische Details:** Visualisiere das Innenleben eines Geräts im Vergleich zum geschlossenen Gehäuse.
* **Zeitsprünge:** Stelle historische und aktuelle Aufnahmen eines Ortes gegenüber.
# Featureübersicht:
Das Portlet bietet dir folgende Kernfunktionen:
* **Intuitive Bedienung:** Nutzer können den Schieberegler einfach mit der Maus oder dem Finger bewegen.
* **Anpassbares Design:** Steuere die Farbe und das Symbol des Griffs (Handle).
* **Flexible Ausrichtung:** Lege fest, in welche Richtung der Vergleich funktionieren soll.
***
## Inhalt
In diesem Reiter pflegst du die beiden Bilder ein, die miteinander verglichen werden sollen (das "Vorher"- und das "Nachher"-Bild).
***
**Bild Vorher:** Lade hier das erste Bild (das Ausgangsbild) hoch oder wähle es aus der Medienverwaltung aus. Dieses Bild liegt standardmäßig links oder oben.
**Bild Nachher:** Lade hier das zweite Bild (das Vergleichsbild) hoch. Dieses Bild wird über das erste gelegt und durch den Schieberegler sichtbar gemacht.
* **Bild lazy laden:** Aktiviere diese Option, um das "Vorher"-Bild verzögert zu laden. Dies verbessert die Ladezeit der Seite, wenn der Slider nicht sofort im sichtbaren Bereich ist.
* **Bild bevorzugt laden:** Aktiviere diese Option, um das "Vorher"-Bild mit hoher Priorität zu laden. Dies wird empfohlen, wenn der Slider ganz oben auf der Seite platziert ist ("Above the Fold"), um den LCP-Wert zu optimieren.
* **Alternativ Text:** Hinterlege einen beschreibenden Text für das "Vorher"-Bild. Dies ist wichtig für die Barrierefreiheit (Screenreader) und die Suchmaschinenoptimierung (SEO).
* **Title Tag:** Gib hier den Titel-Tag für das "Vorher"-Bild ein (wird oft beim Überfahren mit der Maus angezeigt).
* **Alternativ Text:** Hinterlege einen eigenen beschreibenden Text speziell für das "Nachher"-Bild.
* **Title Tag:** Gib hier den Titel-Tag für das "Nachher"-Bild ein.
***
## Darstellung
In diesem Reiter konfigurierst du das visuelle Erscheinungsbild des Sliders und seiner Bedienelemente.
***
* **Label verwenden?:** Entscheide hier, ob Textbeschriftungen (Labels) auf den Bildern angezeigt werden sollen (z. B. "Nein").
* **Farbe des Vergleichsliders:** Wähle über den Farbwähler oder durch Eingabe eines Hex-Codes, die Farbe für die Trennlinie und den Anfasser (Handle).
* **Darstellung des Vergleichsliders:** Bestimme das Symbol für den Anfasser in der Mitte des Sliders. Die Optionen sind:
* **Kreis mit Pfeilen**
* **Pfeile**
* **Ausrichtung des Vergleichsliders:** Lege die Bewegungsrichtung des Sliders fest (z. B. **Horizontal** für einen Vergleich von links nach rechts).
***
***