Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview Base Components Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Carousel-List Info

What does the component do?

It is part of the carousel component.

When should the component be used?

  • Only within the carousel component.
Carousel-Item Carousel
Demo Default
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

The sbb-carousel-list is a wrapper component for sbb-carousel-item,
and it's meant to be used within a sbb-carousel.

<sbb-carousel-list>
  <sbb-carousel-item>
    <img src="../image-0.jpg" alt="SBB image" height="300" width="400" />
  </sbb-carousel-item>
  <sbb-carousel-item>
    <img src="../image-1.jpg" alt="SBB image" height="300" width="400" />
  </sbb-carousel-item>
  <sbb-carousel-item>
    <img src="../image-2.jpg" alt="SBB image" height="300" width="400" />
  </sbb-carousel-item>
</sbb-carousel-list>

Slots

The content is projected in the unnamed slot.

Style

The carousel determines its dimensions by reading the dimensions from the first slotted sbb-carousel-item element.
It is the consumers' responsibility to set the correct height and width of the items, and to ensure that they are all the same size.

These dimensions are read only once, when the component is first connected to the DOM or first becomes visible.
In special cases, such as when the carousel size needs to be responsive, it is recommended to manually
set the width and height CSS properties on the sbb-carousel-list element.
Manually set dimensions will take precedence over the automatically read dimensions.

Events

The sbb-carousel-list component takes care of the emission of the beforeshow and show events on the slotted sbb-carousel-items.

An IntersectionController manages the emission of both, with different thresholds (0.01 for beforeshow and 0.99 for show).

Accessibility

Following the ARIA carousel pattern,
the component has aria-atomic='true' and aria-live='polite'.
If no aria-label is provided on the slotted sbb-carousel-items, the component set a default value on them.

Slots

Name Description
Use the unnamed slot to add sbb-carousel-item elements.
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings