CBK-013 Carousel

Wann wird die Komponente verwendet?

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:

  • viele Informationen kompakt auf einer Seite zu platzieren, ohne die Seite selbst zu überladen
  • wichtige Inhalte hervorzuheben, wie bestimmte Angebote, Events oder Produktdetails
  • einen visuellen Anreiz für User zu schaffen länger auf der Seite bleiben und sich verstärkt mit den Inhalten zu beschäftigen ohne die Seite zu überfrachten 

Übersicht Carousel-Informationen

Für den Aufbau ist die richtige Struktur im Hintergrund wichtig.

Das Karussell hat immer folgenden Aufbau:

  • Structure Container Komponente gefolgt von
  • Carousel Komponente gefolgt von
  • Group Container Komponente gefolgt von
  • weiterer Content-Komponente (beispielsweise Image)
Strukturbeispiel zum Aufbau der Carousel Komponente in der Reihenfolge: Structure Container, Carousel, Group Container, Image

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.

Strukturansicht im Content Tree zum Aufbau einzelner Slides bestehende aus Group Container Komponente plus Image Komponente

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.

Carousel-Komponente auf Tab Items zeigt 6 separat ausgefüllte Felder für das Element Gruppen-Container mit individuellen und kurzen Überschriften

Konfiguration

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:

  • Ein standardisiertes Karussell ohne weitere Einstellungen in den Styles hat keine genaue Angabe,empfehlenswert sind aber mindestens 3 Slides.
  • Bei Style Slide 1 sollten es mindestens 6 Bilder im Karrussell sein.
  • Bei Style Slide 2 sollten es mindestens 8 Bilder im Karrussell sein.

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.