Auf dieser Seite wird verdeutlicht, wie die Komponente in den unterschiedlichen Konfigurationen dargestellt wird. Zur vereinfachten Darstellung ist der benutzte Text ein standardisierter Platzhalter-Text.
Per Klick direkt auf das jeweilige Beispiel springen. Es sind noch weitere Kombinationen des Karussells möglich, die Liste gibt die gängigen Einstellungen wieder.
Standard-Setup für ein Karussell.
Layout:
Konfiguration:
Dieses Karussell hat Standard-Einstellungen und ist sehr einfach gebaut, es hat jedoch einen abweichenden Start-Slide manuell ausgewählt als in der Reihenfolge der Slides sonst vorgegeben.
Layout:
Wichtig! Beim Anpassen der Größe muss das gesamte Karussell als Container für den Inhalt angepasst werden. Es lässt sich auch nur das Image verkleinern, dann bleibt im Hintergrund das Karussell aber weiterhin gleich groß.
Konfiguration:
Dieses Karussell verwendet den Style Slide 2 und hat den Properties-Punkt "Automatically transition slides" aktiviert. Die benötigte Zeit beträgt die standardmäßigen eingestellten 5000 ms.
Es sind 8 Slides verwendet für die korrekte Darstellung. Ebenso ist der Button-Stil 'Buttons Apart' eingestellt, wodurch der linke Sliderpfeil an der linken äußeren Kante des Carousels erscheint und nicht mehr direkt neben dem rechten Sliderpfeil platziert ist.
Layout:
Konfiguration:
Dieses Karussell verwendet den Style Slide 2 und hat den Properties-Einstellungspunkt "Do not loop slides" aktiviert.
Es sind 8 Slides verwendet für die Darstellung. Ebenso ist der Button-Stil 'Buttons Apart' eingestellt, wodurch der linke Sliderpfeil an der linken äußeren Kante des Carousels erscheint und nicht mehr direkt neben dem rechten Sliderpfeil platziert ist.
Der Weiter-Pfeil wird am Ende deaktiviert, sobald der letzte Slide erreicht ist. Ein weiteres Weiterklicken ist dann nicht möglich.
Layout:
Konfiguration:
Dieses Karussell hat manuell vergebene Accessibility Label. Die Label dienen primär dem richtigen Auslesen des Quellcodes für Screenreader.
Im Karussell ist zusätzlich das automatische Sliden aktiviert, um die Start-Pause-Funktion mit manuell vergebenen Accessibility Labeln abzubilden.
Layout:
Konfiguration:
Da die Accessibility Label im Quellcode ausgegeben werden, hier ein beispielhafter Screenshot wie die manuell angepassten Label im Coop ausgegeben werden.
Dieses Karussell verwendet den Style Slide 1. Es benötigt mindestens 6 Bilder für die korrekte Darstellung. Der Slider ist in der Darstellung flacher als das normale Karussell.
Wichtig! In der Editier-Ansicht erscheint das Karussell in der normalen Größe.
Layout:
Konfiguration:
Es ist ebenfalls möglich den Style Slide 1 automatisch durchsliden zu lassen wie im Beispiel unter diesem Text:
Dieses Karussell verwendet den Style Slide 2. Es benötigt mindestens 8 Bilder für die korrekte Darstellung. Der Slider ist in der Darstellung flacher als das normale Karussell.
Wichtig! In der Editier-Ansicht erscheint das Karussell in der normalen Größe.
Layout:
Konfiguration:
Es ist ebenfalls möglich den Style Slide 2 automatisch durchsliden zu lassen wie im Beispiel unter diesem Text:
Dieses Karussell verwendet den Style Slide 2 und slidet automatisch durch. Es sind 8 Slides verwendet für die korrekte Darstellung. Ebenso ist der Button-Stil 'Buttons Apart' eingestellt, wodurch der linke Sliderpfeil an der linken äußeren Kante des Carousels erscheint und nicht mehr direkt neben dem rechten Sliderpfeil platziert ist.
Layout:
Konfiguration:
Dieses Karussell verwendet den Style Slide 2 und hat den Properties-Punkt "Automatically transition slides" deaktiviert und den Einstellungspunkt "Do not loop slides" aktiviert. Es sind 8 Slides verwendet für die Darstellung. Ebenso ist der Button-Stil 'Buttons Apart' eingestellt, wodurch der linke Sliderpfeil an der linken äußeren Kante des Carousels erscheint und nicht mehr direkt neben dem rechten Sliderpfeil platziert ist.
Layout:
Konfiguration: