> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/elemente/medien/bild-vergleich.md).

# Bild - Vergleich

Das Bildervergleich-Element mit Schieberegler ist eine interaktive Funktion, mit der Nutzer zwei Bilder direkt miteinander vergleichen können.

Der Schieberegler ermöglicht es, das **„Vorher-Nachher“-Konzept** auf ansprechende Weise darzustellen, indem der Nutzer die Ansicht selbst steuern kann. Dieses Element ist besonders nützlich für **visuelle Darstellungen von Veränderungen**, wie beispielsweise Renovierungen, Makeovers, Produktvergleiche, Kosmetische Behandlungen oder Grafikanpassungen.

<figure><img src="/files/glalTHiX1d8mnPgt5YTz" alt=""><figcaption></figcaption></figure>

### Allgemeine - Konfiguration

<figure><img src="/files/vuubFCtI8K5NG1fYlUBk" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="262">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Generelles Layout (1)</td><td>Landscape = Bilder nebeneinander<br>Portrait = Bilder untereinander</td></tr><tr><td>Eigene Größe (2)</td><td>Wenn diese Funktion deaktiviert ist, werden die hochgeladenen Bilder nicht zugeschnitten und in Originalgröße ausgeliefert</td></tr><tr><td>Beschriftung anzeigen (3)</td><td>Setze Labels für den Vorher- und Nachher-Bereich. Dabei kannst du auch HTML verwenden.</td></tr><tr><td>Animation bei Mouseover (4)</td><td>Normalerweise muss geklickt werden, um den Schieberegler zu bedienen. Mit dieser Funktion bewegt sich der Schieberegler, sobald die Maus über den Bereich fährt.</td></tr></tbody></table>

### Medien - Einstellungen

<figure><img src="/files/slpzLQjtTIUgJFGpqkGU" alt=""><figcaption></figcaption></figure>

### Layout - Einstellungen

<figure><img src="/files/77SgtWFlyYymFxgnPJX7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="268">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Schieberegler - Farbe (1)</td><td>Hier solltest du eine kontrastreiche Farbe verwenden, sonst wird der Regler ggf. übersehen.</td></tr><tr><td>Schieberegler - Schatten (2)</td><td>Um sich mehr von den Bildern abzuheben</td></tr><tr><td>Schieberegler - Kreis (3)</td><td>Je nach Anwendungsfall und Belieben wird ein Kreis um die Pfeile gesetzt.</td></tr><tr><td>Schieberegler - Kreis Blur (4)</td><td>Der Hintergrund der Pfeile wird innerhalb des Kreises unscharf</td></tr><tr><td>Schieberegler - Startpunkt (5)</td><td>Im Standard bei 50%, also der exakten Mitte beider Bilder</td></tr><tr><td>Schieberegler - Smoothing (6)</td><td>Eine leichter Verzögerungseffekt beim Hin- und Herschieben des Reglers</td></tr><tr><td>Schieberegler - Smoothing Stärke (7)</td><td>Je höher der Wert, desto stärker wird der Smoothing Effekt</td></tr></tbody></table>