# Bild Text Slider
> Feature der Pro Version
Bild Slider bringen Bewegung auf Deine Seite und erhalten in der Regel die meiste Aufmerksamkeit. Bisher konnte in Shopware kein Text auf dem Bild Slider platziert werden - durch unseren Bild Text Slider können nun jedoch problemlos Textinformationen platziert werden.
## Grundlagen
### Inhalt
Im Bereich **Inhalt (1)** lassen sich Bilder hinzufügen. Nach dem Hochladen oder Auswählen der Bilder stehen neben den allgemeinen Slider **Einstellungen (2)** die **einzelnen Slides (3)** mit ihrer jeweiligen Konfiguration zur Verfügung.
### Sortierung
Sortiere Slides per Drag & Drop. Ziehe im Tab Inhalt das **Bild (1)** zum Sortieren über ein anderes **Bild (2)**.
### Ersetzen
Ersetze die Bilder der einzelnen Slides über das **Kontextmenü (1)**. Wähle nun die Option **Ersetzen (2)**.
Es erscheint ein Modal-Fenster mit den üblichen Möglichkeiten zum Auswählen oder Hochladen eines Bildes oder Videos.
### Einstellungen
Im Tab Einstellungen befinden sich die Grundeinstellungen des Sliders.
Im **Anzeigemodus (1)** entscheidest Du, wie das Bild in der Galerie dargestellt werden soll:
* **Standard/Original:** Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
* **Füllen/Zugeschnitten:** Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
* **Beinhalten/Feste Höhe:** Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus *Standard* wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt *Vertikale Ausrichtung* definieren.
{% hint style="info" %}
Der **Anzeigemodus** sollte auf Füllen stehen, wenn viele Inhalte in den einzelnen Slides dargestellt werden sollen. Im Standard/Original oder Beinhalten/Feste Höhe Anzeigemodus steht möglicherweise nicht mehr genug Platz auf mobilen Geräten zur Verfügung, da der Slider hierbei proportional skaliert und auch an Höhe verliert.
{% endhint %}
Zusätzlich kann das gesamte Slider-Element **automatisch rotieren (2)**. Wird diese option aktiviert, stehen die Optionen **Pause bei Mouse-Over (3)** und **Unterbrechung (4)** zur Verfügung. Die **Unterbrechung (4)** gibt in Millisekunden an, wie lange der Slider sich nicht bewegen soll, woraufhin er dann eine Rotationsbewegung mit der **Geschwindigkeit (5)** in Millisekunden durchführt. Die Geschwindigkeit gibt also an, wie lange es dauert, bis die Rotation den Slide wechselt - je höher diese Angabe, desto langsamer die Rotationsbewegung.
Im Bereich **Modus (6)** kann der Slider als typischer Karussell Slider oder als Galerie mit einfachem Bildwechsel ohne Rotation betrieben werden. Über die **Achse (7)** bestimmst Du, im Karussell-Modus, ob sich der Slider horizontal oder vertikal bewegen soll.
Der Slider kann über **Mehrere Slides anzeigen (8)** mehrere Elemente auf einmal darstellen. Sobald die Option aktiv ist, kannst Du für jeden Viewport die Anzahl der gleichzeitig sichtbaren Slides einstellen.
Der **Randabstand (9)** legt fest, wie viel Platz zwischen dem äußeren Rand des Sliders und den sichtbaren Elementen im Slider bleibt. Dies ermöglicht es, einen Teil des nächsten oder vorherigen Elements bereits am Rand des Sliders sichtbar zu machen, was dem Nutzer zeigt, dass weitere Inhalte vorhanden sind, durch die er navigieren kann.
Der **Abstand (10)** bestimmt den Abstand zwischen den einzelnen Slides, wenn diese durch die Einstellungen Mehrere Sides anzeigen (8) oder Randabstand (9) sichtbar sind.
Die Einstellung **Schleife (11)** sorgt dafür, dass der Slider nach dem letzten Slide wieder mit dem ersten beginnt - optisch läuft der Slider dadurch unendlich. Für diesen Effekt werden die Slides kopiert und immer wieder hinten angehängt.
Wird die Option **Zurückspulen (12)** aktiviert, wird nach dem erreichen des letzten Slides der Slider wieder an den Anfang "gespult".
Sind die Einstellungen **Schleife (11)** und **Zurückspulen (12)** inaktiv, bleibt der Slider beim letzten Slide stehen.
Beispiele:
Darstellung von zwei Slides gleichzeitig
### Slides
Die Slides sind die einzelnen Elemente, welche durch das Slider-Element rotieren.
Mit Shopware 6.5 wurde der Sanitizer in Editoren eingeführt, welcher bestimmte Code-Inhalte aus dem Editor bereinigt. Daher kannst Du nun mit der Option **Verwende Code Editor (1)** den WYSIWYG-Editor durch einen reinen Code-Editor wechseln. Deine Inhalte werden in dem Code-Editor nicht bereinigt.
Über den **Editor (2)** können Text-Inhalte auf dem Slider platziert werden. Diese liegen formatiert auf dem zuvor ausgewählten Slider-Bild. Die Darstellung von Buttons ist ebenso über den Editor realisierbar wie das Einbinden eines weiteren Bildes.
```html
Lorem ipsum dolor sit #1
At vero eos et accusam et justo duo dolores et ea rebum.
```
{% hint style="info" %}
Für die erweiterte Formatierung von [Texten](https://getbootstrap.com/docs/5.1/content/typography/) und [Buttons](https://getbootstrap.com/docs/5.1/components/buttons/) im Editor kannst Du dich an den Inhalten des [Bootstrap Frameworks](https://getbootstrap.com/docs/5.1/getting-started/introduction/) orientieren. Dieses ist in der Storefront implementiert und kann daher vollumfänglich genutzt werden.
{% endhint %}
Die **Verlinkung (3, 4)** des Slides ist optional - die Verlinkung des gesamtes Slides kann auch zu Gunsten eines Call-To-Action Buttons im Editor weggelassen werden.
Die **Linkbeschreibung (5)** wird zum Auslesen des Links von Screenreadern genutzt und ist ein wichtiger Bestandteil für die Barrierefreiheit.
Die **Textfarbe (7)** ist über den Color-Picker einstellbar. Da die Texte auf einem Bild häufig in weißer Schrift erfolgen und wir die Lesbarkeit im Editor erhalten möchten, kann die Grundfarbe des Textes über diesen Color-Picker erfolgen. Die Farbangaben im Editor können diese Farbangabe allerdings überschreiben.
Die **Hintergrundfarbe (8)** wird für den Bereich des Text-Elements gesetzt.
Mit **Hintergrund weichzeichnen (9)** kann alles hinter dem Inhaltsbereich mit der eingegebenen Stärke in Pixeln weichgezeichnet werden. Der Effekt ist nur sichtbar, wenn eine transparente oder teiltransparente Hintergrundfarbe (3) über den Colorpicker gewählt wurde.
Die **Vertikale Ausrichtung (11)** bestimmt in Verbindung mit der **horizontalen Ausrichtung (10)** die grundlegende Platzierung des Text-Elementes auf dem Bild.
Die **Minimale Breite (12)** bestimmt, wie breit das Text-Element mindestens sein darf. Diese Einstellung erzeugt in Verbindung mit der **maximalen Breite (13)** eine dynamische Breite zwischen minimaler und maximaler Breite.
**Individuelle Innenabstände (14)** bestimmen den Abstand im Text-Element und macht sich überwiegend bemerkbar, wenn eine **Hintergrundfarbe (8)** eingestellt wurde.
**Individuelle Außenabstände (15)** sorgen dafür, dass das Text-Element nicht am Bildrand klebt und bestimmt darüber hinaus die genaue Positionierung in Abhängigkeit der vertikalen und horizontalen Ausrichtung (10, 11)**.**
**Abgerundete Ecken (16)** sind nur sichtbar, wenn eine Hintergrundfarbe (8) oder Unschärfe über die Einstellung Hintergrund weichzeichnen (9) definiert wurde.
Über die **Horizontale Bildausrichtung (17)** und **Vertikale Bildausrichtung (18)** wird das Hintergrundbild im Element ausgerichtet. Die Einstellung wird nur im Anzeigemodus `Füllen` des Einstellungen-Tabs benötigt.
Durch die Option **Hintergrundbild mit Farbe überlagern (19)** dämpfst Du das Hintergrund nach belieben mit einer Teiltransparenten Farbe ab und gestalte so den Text lesbarer.
**Abgerundete Ecken (20)** rundet die Ecken des Bildes im Slide ab. Alternativ kann auch im Einstellungen-Tab das gesamte Slider-Element mit abgerundeten Ecken versehen werden.
**Bilder als ausschließlich dekorativ kennzeichnen (21)** bestimmt im Sinne der Barrierefreiheit, ob das Bild nur dekorativ verwendet wird und nicht von Screenreadern erfasst werden soll.
Mit der Option **Hohe Ladepriorität (22)** wird das Bild mit einer hohen Ladepriorität (`fetchpriority="high"`) im HTML markiert. Dadurch wird das Bild bevorzugt vom Browser geladen und erscheint schneller sichtbar im sichtbaren Bereich – ideal für Above-the-Fold-Elemente.\
\
Eine **Eingangsanimation (23)** blendet den Text beim Slide-Wechsel animiert ein. In Verbindung mit den **Aufmerksamkeits-Animationen (24)** wirkt das Element weniger statisch.
Benutzerdefinierte Klassen lassen sich im Feld **CSS-Klassen (25)** hinterlegen. Das erlaubt es das Element mit eigenem CSS Code zielsicher zu selektieren oder bereits vorhandenes Styling per Klasse an das Element zu binden.
## Übergroße Texte
Erscheinen die Texte und Überschriften `h1,` `h2`, `h3`, `h4`, `h5`, `h6` nicht groß genug, kann im Editor mit Hilfe der Optionen **Überschriften vergrößern (1)** und **Texte vergrößern (2)** die Schriftdarstellungen in der Vorschau und Storefront vergrößern.
{% hint style="success" %}
Die Schriften skalieren responsiv und werden auf mobilen Geräten kleiner Dargestellt.
{% endhint %}
Weiterhin können natürlich auch im Quelltext des Editors die sogenannten display-headings Klassen des zugrunde liegenden Frameworks Bootstrap genutzt werden.
Beispiel:
```html
```
Im `h2-Tag` ist die Klasse `display-4` hinzugefügt, welche die h2-Überschrift nochmals deutlich vergrößert. Genutzt werden können die Klassen `display-1`, `display-2`, `display-3` und `display-4`. Ab Shopware 6.5 können auch die Klassen `display-5` und `display-6` genutzt werden.
{% hint style="info" %}
Die Schriften skalieren responsiv und werden auf mobilen Geräten kleiner Dargestellt.
{% endhint %}
Beispiel:
## Konfigurationsbeispiele
### Slider mit Text-Element Hintergrund
In diesem Beispiel liegt der Text im Text-Element auf einer teiltransparenten Hintergrundfarbe.
Um eine teiltransparente **Hintergrundfarbe (1)** zu definieren, wähle im Color-Picker der Hintergrundfarbe im Alpha-Kanal einen Wert `< 100`.
Neben der **vertikalen Ausrichtung (2)** und der **horizontalen Ausrichtung (3)** sind die Einstellungen der Abstände entscheidend. Die **Innenabstände (6)** sind im nachfolgenden Bild grün markiert und bestimmen den Abstand zwischen Text und äußerer Begrenzung des Text-Elementes.
Die **Außenabstände (7)**, hier orange markiert, sind links und rechts in Prozent gesetzt. Zusätzlich zur allgemeinen **vertikalen (2) und horizontalen Ausrichtung (3)** wird das Text-Element also immer einen Abstand von `10%` nach links und rechts zum Rand des Sliders erhalten.
### Slider mit Hintergrundbild-Überlagerung
Abweichend zum vorigen Beispiel wäre es denkbar, das gesamte Slider-Bild mit einer Hintergrundfarbe zu überlagern und so die Lesbarkeit des Textes auf einem Bild zu verbessern.
Das Feld für die **Hintergrundfarbe (1)** sowie **individuelle Innenabstände (2**) und **abgerundete Ecken (4)** werden hierbei genullt bzw. ausgeschaltet.
Sobald die Option **Hintergrundbild mit Farbe überlagern (5)** aktiviert wurde, stehen zusätzliche Felder für die Farbe und die Sichtbarkeit zur Verfügung.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themedocs.zenit.design/content/erlebniswelten/bloecke/elemente/bild-text-slider.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.