Carousel
Carousel can display single or multiple slides at a time. The navigation can be configured to be sequential as a group, where slide must be viewed in a specific order, or with a tablist, where users can access slides in any order.
Carousels offer two types of navigation, sequential and non-sequential.
When content is sequential, create a slide group, to ensure slides are read in a specific order.
Do not include a tablist, as this would enable the content to be read out of sequence.
When you have content which can be accessed in any order, then CarouselTabList provides a visual indicator of the current slide and clickable elements for direct navigation to specific slides. Position the tablist, either at the top or bottom of the carousel, alongside other controls like CarouselNextButton and CarouselPreviousButton.
If you position a tablist or navigation controls at the bottom of the carousel, the slides will initially receive focus. To provide an accessibility user experience, navigation controls should receive focus before the content. You can achieve this by using an additional div to reverse the flex direction, thereby ensuring the navigation controls are focused first.
CarouselCard is a ready-made Card component that can be used within a Carousel.
Incorporate actions, such as a Link, into a slide. CarouselCard supports actions, through the actions prop.
- Actions such as
Link, can be incorporated into a carousel slide, but avoid embedding other clickable actions during animation to prevent accidental clicks while slides are transitioning. - Content within slides can be tabbable but ensure that off-screen content is not tabbable and hidden from the screen-reader, as this can lead to a poor user experience.
- To enable more than one piece of content to occupy the same space.
- To navigate small amounts content, that are viewed in a linear sequence.
- To position information near the top of the viewable area.
- When content discovery and drawing attention is a priority for your product.
- To display less than 2 or more than 5 pieces of content.
- Always provide navigation controls for the carousel, alongside a visual indicator of the current slide.
- When tabbing through the focus order, ensure that any tablist or navigation controls receive focus before the slide.
- Include 5 or fewer slides. The most important slide always comes first.
- Not all content is visible within a carousel until selected, ensure that important content is also placed on another page of your site.
- To access content, un-ordered content, out of sequence, add a tablist.
- Do not use a tablist when more than one slide is visible.
To import Carousel and related components from the @salt-ds/embla-carousel package:
- Install the required package.
or
- Import the components, required.
Carousel is a context that wraps the Embla API.
CarouselTabList is a visual progress indicator for the carousel, and allows users to navigate to a specific slide.
CarouselTab is the tab button used by the CarouselTabList to navigate to a specific slide.
CarouselSlides provides a viewport for the slide content, screen reader support and keyboard navigation.
CarouselPreviousButton is a composable button that navigates the current slides to the previous slide.
CarouselNextButton is a composable button that navigates the current slides to the next slide.
CarouselProgressLabel is a composable label that shows a text description of the carousel's position.
CarouselAutoplayIndicator provides a countdown view of the carousel's position during autoplay.
CarouselCard provides a convenient slide component, that creates a common card pattern.
Carousels offer two types of navigation, sequential and non-sequential.
When content is sequential, create a slide group, to ensure slides are read in a specific order.
Do not include a tablist, as this would enable the content to be read out of sequence.
When you have content which can be accessed in any order, then CarouselTabList provides a visual indicator of the current slide and clickable elements for direct navigation to specific slides. Position the tablist, either at the top or bottom of the carousel, alongside other controls like CarouselNextButton and CarouselPreviousButton.
If you position a tablist or navigation controls at the bottom of the carousel, the slides will initially receive focus. To provide an accessibility user experience, navigation controls should receive focus before the content. You can achieve this by using an additional div to reverse the flex direction, thereby ensuring the navigation controls are focused first.
CarouselCard is a ready-made Card component that can be used within a Carousel.
Incorporate actions, such as a Link, into a slide. CarouselCard supports actions, through the actions prop.
- Actions such as
Link, can be incorporated into a carousel slide, but avoid embedding other clickable actions during animation to prevent accidental clicks while slides are transitioning. - Content within slides can be tabbable but ensure that off-screen content is not tabbable and hidden from the screen-reader, as this can lead to a poor user experience.
- To enable more than one piece of content to occupy the same space.
- To navigate small amounts content, that are viewed in a linear sequence.
- To position information near the top of the viewable area.
- When content discovery and drawing attention is a priority for your product.
- To display less than 2 or more than 5 pieces of content.
- Always provide navigation controls for the carousel, alongside a visual indicator of the current slide.
- When tabbing through the focus order, ensure that any tablist or navigation controls receive focus before the slide.
- Include 5 or fewer slides. The most important slide always comes first.
- Not all content is visible within a carousel until selected, ensure that important content is also placed on another page of your site.
- To access content, un-ordered content, out of sequence, add a tablist.
- Do not use a tablist when more than one slide is visible.
To import Carousel and related components from the @salt-ds/embla-carousel package:
- Install the required package.
or
- Import the components, required.
Carousel is a context that wraps the Embla API.
CarouselTabList is a visual progress indicator for the carousel, and allows users to navigate to a specific slide.
CarouselTab is the tab button used by the CarouselTabList to navigate to a specific slide.
CarouselSlides provides a viewport for the slide content, screen reader support and keyboard navigation.
CarouselPreviousButton is a composable button that navigates the current slides to the previous slide.
CarouselNextButton is a composable button that navigates the current slides to the next slide.
CarouselProgressLabel is a composable label that shows a text description of the carousel's position.
CarouselAutoplayIndicator provides a countdown view of the carousel's position during autoplay.
CarouselCard provides a convenient slide component, that creates a common card pattern.
Carousels offer two types of navigation, sequential and non-sequential.
When content is sequential, create a slide group, to ensure slides are read in a specific order.
Do not include a tablist, as this would enable the content to be read out of sequence.
When you have content which can be accessed in any order, then CarouselTabList provides a visual indicator of the current slide and clickable elements for direct navigation to specific slides. Position the tablist, either at the top or bottom of the carousel, alongside other controls like CarouselNextButton and CarouselPreviousButton.
If you position a tablist or navigation controls at the bottom of the carousel, the slides will initially receive focus. To provide an accessibility user experience, navigation controls should receive focus before the content. You can achieve this by using an additional div to reverse the flex direction, thereby ensuring the navigation controls are focused first.
CarouselCard is a ready-made Card component that can be used within a Carousel.
Incorporate actions, such as a Link, into a slide. CarouselCard supports actions, through the actions prop.
- Actions such as
Link, can be incorporated into a carousel slide, but avoid embedding other clickable actions during animation to prevent accidental clicks while slides are transitioning. - Content within slides can be tabbable but ensure that off-screen content is not tabbable and hidden from the screen-reader, as this can lead to a poor user experience.
- To enable more than one piece of content to occupy the same space.
- To navigate small amounts content, that are viewed in a linear sequence.
- To position information near the top of the viewable area.
- When content discovery and drawing attention is a priority for your product.
- To display less than 2 or more than 5 pieces of content.
- Always provide navigation controls for the carousel, alongside a visual indicator of the current slide.
- When tabbing through the focus order, ensure that any tablist or navigation controls receive focus before the slide.
- Include 5 or fewer slides. The most important slide always comes first.
- Not all content is visible within a carousel until selected, ensure that important content is also placed on another page of your site.
- To access content, un-ordered content, out of sequence, add a tablist.
- Do not use a tablist when more than one slide is visible.
To import Carousel and related components from the @salt-ds/embla-carousel package:
- Install the required package.
or
- Import the components, required.
Carousel is a context that wraps the Embla API.
CarouselTabList is a visual progress indicator for the carousel, and allows users to navigate to a specific slide.
CarouselTab is the tab button used by the CarouselTabList to navigate to a specific slide.
CarouselSlides provides a viewport for the slide content, screen reader support and keyboard navigation.
CarouselPreviousButton is a composable button that navigates the current slides to the previous slide.
CarouselNextButton is a composable button that navigates the current slides to the next slide.
CarouselProgressLabel is a composable label that shows a text description of the carousel's position.
CarouselAutoplayIndicator provides a countdown view of the carousel's position during autoplay.
CarouselCard provides a convenient slide component, that creates a common card pattern.