Was macht die Komponente?

Ein Carousel ist ein interaktives Element zur Anzeige mehrerer Inhalte innerhalb eines begrenzten Bereichs. Es zeigt jeweils einen oder mehrere Inhalte an und ermöglicht das horizontale Durchblättern per Navigationselemente oder Gesten.

Wann soll die Komponente eingesetzt werden?

• Wenn mehrere ähnliche Inhalte gezeigt werden sollen, aber nicht alle gleichzeitig Platz haben.
• Wenn der Fokus auf einer visuellen oder inhaltlichen Abfolge liegt (z. B. Highlights, Kampagnen, Produkte).
• Wenn der verfügbare Platz begrenzt ist und Inhalte platzsparend präsentiert werden sollen.

Regeln

• Es sollten nicht mehr als 7 Slides verwendet werden.
• Jeder Slide soll einen klaren Fokus haben.
• Carousels sollen nicht automatisch wechseln – nur manuelle Steuerung durch den Benutzer.

Spielwiese

The sbb-carousel is a slideshow component that can be used to display a series of items, as images, once at a time,
allowing users to cycle through them via horizontal scrolling or using controls (e.g. a paginator).

The component must be used together with a sbb-compact-paginator and a sbb-carousel-list,
which accepts one or more sbb-carousel-item.

<sbb-carousel>
  <sbb-carousel-list>
    <sbb-carousel-item>
      <img src="../img-1.jpg" alt="Image 1" height="300" width="400" />
    </sbb-carousel-item>
    <sbb-carousel-item>
      <img src="../img-2.jpg" alt="Image 2" height="300" width="400" />
    </sbb-carousel-item>
    <sbb-carousel-item>
      <img src="../img-3.jpg" alt="Image 3" height="300" width="400" />
    </sbb-carousel-item>
  </sbb-carousel-list>
  <sbb-compact-paginator></sbb-compact-paginator>
</sbb-carousel>

Slots

The content is projected in an unnamed slot.

The length and the pageSize properties of the sbb-compact-paginator are automatically set based on the number of slotted images.

The values of the accessibilityPageLabel, accessibilityPreviousPageLabel and accessibilityNextPageLabel properties
are also set, in order to automatically override the 'page' keyword to the 'slide' one.
If needed, consumers can provide their own values.

Interactions

It's possible to switch between items using the paginator controls, or, if the component is focused, using the arrow keys.

Accessibility

Following the ARIA carousel pattern,
the component has role="region" and aria-label="carousel".

To not break the accessibility when links are used together with images, please place the image within the anchor tag.

<sbb-carousel>
  <sbb-carousel-list>
    <sbb-carousel-item>
      <a href="#" target="_blank">
        <img src="../img-1.jpg" alt="SBB image" height="300" width="400" />
      </a>
    </sbb-carousel-item>
    ...
</sbb-carousel>

Properties

Slots