# 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="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2F5bEOGKcFv0OPS1sfVePD%2FBildschirmfoto%202024-10-05%20um%2021.50.42.png?alt=media&#x26;token=fea15909-be39-4103-aead-6187225b95ba" alt=""><figcaption></figcaption></figure>

### Allgemeine - Konfiguration

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2F7GURpfqUV6CGdxAjvC5a%2FBildschirmfoto%202024-10-05%20um%2021.52.40.png?alt=media&#x26;token=f9365ef9-4182-43c4-9c98-305b164dc51a" 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="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FH2WjtreKdfpS7S1cDAqf%2FBildschirmfoto%202024-10-05%20um%2021.57.58.png?alt=media&#x26;token=fa20b208-13c1-4847-baf5-98dd5031ddc5" alt=""><figcaption></figcaption></figure>

### Layout - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2Fwt4FaYU8EVnokS33CKes%2FBildschirmfoto%202024-10-05%20um%2021.59.08.png?alt=media&#x26;token=64044db7-759a-41af-bdda-1d20b63fcb93" 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>