A Carousel displays multiple slides of content. It groups similar items into a horizontally scrollable container, with one item displayed at a time.
It is currently used in the Onboarding Feature Dialog.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Slide content |
Configurable area to display the content for each slide. |
No |
|
2. Navigation control – Button |
Controls to navigate left and right between Carousel slides. The Button is in a disabled state when the user cannot navigate further. Users can also choose to navigate with the slide selectors. |
No |
|
3. Navigation control – Current slide |
Interactive dot that represents the current slide. |
No |
|
4. Navigation control – Slide |
Interactive dot that represents another slide that is not currently displayed.
Recommended slide count: |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Behavior
In the navigation control, both the chevrons and dots are interactive and can be used to navigate through slides in the Carousel.
When one slide transitions to another, the current slide moves out of view, then the new slide moves into view (in the same direction).
The initial slide on first view can be set using the property initialSlide.
Example
Onboarding
The Onboarding Feature Dialog is an example of how to use a Carousel.
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Title |
Maximum of one line of text to describe the entire Onboarding Carousel. |
Yes |
|
2. Image |
Visual that supports the slide title and description. |
Yes |
|
3. Slide title |
Maximum of 2 lines of text to describe an individual Onboarding Carousel item. |
Yes |
|
4. Description |
Maximum of 6 lines of information to describe the topic in the slide title. |
Yes |
|
5. Navigation control |
Controls to navigate left and right between Carousel slides. The Button is in a disabled state when the user cannot navigate further. |
No |
Component dependencies
This component is internally dependent on the following components: