Carousel
Carousel is designed to display either single or multiple slides at a time, allowing users to increment or decrement through the sequence.
Carousel is a composable pattern of Salt components that uses the Embla API.
A basic carousel navigates through slides individually, one at a time.
Adding a title serves as a heading for the carousel group.
CarouselTabList is an aria tablist providing support for screen readers to
announce the slides as the associatedtab. To enhance accessibility, ensure
that each slide has a unique id. This will facilitate the association between
the tablist and tab, thereby improving screen reader functionality.
A tablist provides a visual indicator of the current slide and includes clickable elements for direct navigation to specific slides, along with keyboard navigation controls. Ensure the tablist is positioned at the top or bottom of the carousel, alongside other controls like CarouselNextButton and CarouselPreviousButton.
Additional actions, such asLink, can be incorporated into a
carousel slide, but avoid embedding other clickable actions during animation to
prevent accidental clicks while slides are transitioning.
CarouselCard also supports actions, through the actions prop.
Content within slides can be tabbable but ensure that off-screen content is not tabbable, as this can lead to a poor user experience. This example ensures that CSS is applied to the off-screen content, preventing it from being tabbable.
When composed with other components the visible slide can be controlled programmatically using the embla API.
Refer to the Embla documentation for the full API.
- 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.
- 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 provide arrow key navigation add a tablist.
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 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.
Carousel is a composable pattern of Salt components that uses the Embla API.
A basic carousel navigates through slides individually, one at a time.
Adding a title serves as a heading for the carousel group.
CarouselTabList is an aria tablist providing support for screen readers to
announce the slides as the associatedtab. To enhance accessibility, ensure
that each slide has a unique id. This will facilitate the association between
the tablist and tab, thereby improving screen reader functionality.
A tablist provides a visual indicator of the current slide and includes clickable elements for direct navigation to specific slides, along with keyboard navigation controls. Ensure the tablist is positioned at the top or bottom of the carousel, alongside other controls like CarouselNextButton and CarouselPreviousButton.
Additional actions, such asLink, can be incorporated into a
carousel slide, but avoid embedding other clickable actions during animation to
prevent accidental clicks while slides are transitioning.
CarouselCard also supports actions, through the actions prop.
Content within slides can be tabbable but ensure that off-screen content is not tabbable, as this can lead to a poor user experience. This example ensures that CSS is applied to the off-screen content, preventing it from being tabbable.
When composed with other components the visible slide can be controlled programmatically using the embla API.
Refer to the Embla documentation for the full API.
- 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.
- 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 provide arrow key navigation add a tablist.
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 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.
Carousel is a composable pattern of Salt components that uses the Embla API.
A basic carousel navigates through slides individually, one at a time.
Adding a title serves as a heading for the carousel group.
CarouselTabList is an aria tablist providing support for screen readers to
announce the slides as the associatedtab. To enhance accessibility, ensure
that each slide has a unique id. This will facilitate the association between
the tablist and tab, thereby improving screen reader functionality.
A tablist provides a visual indicator of the current slide and includes clickable elements for direct navigation to specific slides, along with keyboard navigation controls. Ensure the tablist is positioned at the top or bottom of the carousel, alongside other controls like CarouselNextButton and CarouselPreviousButton.
Additional actions, such asLink, can be incorporated into a
carousel slide, but avoid embedding other clickable actions during animation to
prevent accidental clicks while slides are transitioning.
CarouselCard also supports actions, through the actions prop.
Content within slides can be tabbable but ensure that off-screen content is not tabbable, as this can lead to a poor user experience. This example ensures that CSS is applied to the off-screen content, preventing it from being tabbable.
When composed with other components the visible slide can be controlled programmatically using the embla API.
Refer to the Embla documentation for the full API.
- 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.
- 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 provide arrow key navigation add a tablist.
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 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.