Die Karussellkomponente (Englisch Carousel) ist ein interaktives Element, über das sich mehrere Inhalte wie Bilder, Texte oder Videos in einem rotierenden Format abbilden lassen. Das Carousel ist eine interaktive Komponente für User, da diese die Inhalte selbst durchklicken können. Alternativ lässt sich das Sliden der Inhalte auch automatisieren.
Die Verwendung des Carousel bietet sich an um:
Für den Aufbau ist die richtige Struktur im Hintergrund wichtig.
Das Karussell hat immer folgenden Aufbau:
Jeder weitere Slide im Karussell besteht immer aus der Komponenten-Kombination Group Container plus weiterer Content (beispielsweise Image).
Es ist auch möglich anderen Content als Bildern im Group Container abzubilden. Die Beschreibungen hier beziehen sich auf den am häufigsten genutzten Fall und das ist ein Bilder-Slider.
In der Carousel-Komponente muss immer eine neue Gruppe hinzugefügt werden für einen neuen Slide.
Die Benennung dieser Gruppe in AEM ist für User nicht sichtbar. Die Benennung sollte dennoch eindeutig sein, da es die weitere Pflege erleichtert.
Wichtig: Jeder Group Container steht für einen Slide im Karrussell. Soll ein Karussell beispielsweise 6 Slides haben, beinhaltet dies 6 Group Container.
Wichtig: Die Optionen „Automatically transition slides“ und „Do not loop slides“ lassen sich nicht kombinieren. Wenn beide aktiviert sind, hat die automatische Wiedergabe Vorrang. Das Karussell beginnt also wieder von vorn.
Die Einstellung „Do not loop slides“ ist ausschließlich für Karussells mit manueller Navigation geeignet.
Im Tab für Barrierefreiheit lassen sich vor allem aria_label Attribute vergeben über einzelne Felder. Aria-Label sind wichtige Attribute im Quellcode, die einen beschreibenden Text hinzufügen, der wiederum von Bildschirmlesegeräten vorgelesen wird für Benutzer:innen mit Einschränkungen.
Das Karussell lässt sich in der Darstellung der Slides und Buttons minimal anpassen über die Dropdown-Felder Slider Styles und Carousel Button Style.
Slider Styles: Erlaubt die Auswahl zwischen None, Style Slide 1, Style Slide 2; ist standardmäßig auf None eingestellt.
Carousel Button Style: Erlaubt die Auswahl zwischen None und Buttons Apart; ist standardmäßig auf None eingestellt.
Ja. In den Karrussell-Einstellungen unter Properties wird dies über die Checkbox 'Autoamtically transition slides' gesteuert. Die Checkbox muss dafür angehakt sein. Nach Anhaken erscheint darüber ein neuer Konfigurationsbereich, in dem die Dauer der Slides definiert wird. Näheres siehe unter Konfiguration - Dialogfeld Properties.
Die Anzahl der Slides ist nicht fix limitiert, es gibt aber gewisse empfohlene Mindestanzahl:
Bilder im Karussell haben keine speziellen Anforderungen. Sie sollten den gängigen Bildmaßen und -empfehlungen entsprechen.
Ja, grundsätzlich sind Videos und Gifs möglich. Im Sinne der Barrierefreiheit und des Informationsgehalts ist ihr Einsatz in einem Karussell immer genau zu überlegen. Das gilt insbesondere dann, wenn Videos und Gifs in einem automatisierten Karussell sind. Bestimmte Personengruppen lesen unterschiedlich schnell und haben abweichende Aufmerksamkeitsspannen. Ein automatisiertes Karussell mit zusätzlichen beweglichen Inhalten kann die Informationsverarbeitung erschweren.