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.
Carousel is a pre-defined composition of Salt components that uses the Embla API.
You can customize both the content and navigation, according to your needs, see the usage documentation for guidance.
Alternatively, the CarouselCard component offers an option for creating slide elements.
Consider how the Carousel integrates within the page structure.
You can use a heading element like H1 or H2 as the Carousel’s title and associate it with the Carousel using the aria-labelledby attribute.
Bordered slides enhance differentiation between individual slides. Enable CarouselCard borders by setting the bordered prop to true.
The carousel can showcase multiple slides simultaneously, offering flexibility in single or multiple slide increments.
It is recommended to include a preview of the next slide in the sequence to enhance user anticipation. Allow a recommended, 4%, of space to enable the next slide in the sequence to be visible.
Autoplay can be added through the Embla plugin Autoplay, but requires additional code to support accessibility.
- Continue cycling through the frames with 5–7s delays.
- Add a progress indicator.
- Pause the animation upon hover.
- Stop the slideshow upon any user interaction with content and do not resume, unless the user restarts it with the play button.
The example below demonstrates accessible autoplay for illustrative purposes.
The Embla API enables programmatic control, such as the visible slide.
Refer to the Embla documentation for the full API.
Carousel is a pre-defined composition of Salt components that uses the Embla API.
You can customize both the content and navigation, according to your needs, see the usage documentation for guidance.
Alternatively, the CarouselCard component offers an option for creating slide elements.
Consider how the Carousel integrates within the page structure.
You can use a heading element like H1 or H2 as the Carousel’s title and associate it with the Carousel using the aria-labelledby attribute.
Bordered slides enhance differentiation between individual slides. Enable CarouselCard borders by setting the bordered prop to true.
The carousel can showcase multiple slides simultaneously, offering flexibility in single or multiple slide increments.
It is recommended to include a preview of the next slide in the sequence to enhance user anticipation. Allow a recommended, 4%, of space to enable the next slide in the sequence to be visible.
Autoplay can be added through the Embla plugin Autoplay, but requires additional code to support accessibility.
- Continue cycling through the frames with 5–7s delays.
- Add a progress indicator.
- Pause the animation upon hover.
- Stop the slideshow upon any user interaction with content and do not resume, unless the user restarts it with the play button.
The example below demonstrates accessible autoplay for illustrative purposes.
The Embla API enables programmatic control, such as the visible slide.
Refer to the Embla documentation for the full API.
Carousel is a pre-defined composition of Salt components that uses the Embla API.
You can customize both the content and navigation, according to your needs, see the usage documentation for guidance.
Alternatively, the CarouselCard component offers an option for creating slide elements.
Consider how the Carousel integrates within the page structure.
You can use a heading element like H1 or H2 as the Carousel’s title and associate it with the Carousel using the aria-labelledby attribute.
Bordered slides enhance differentiation between individual slides. Enable CarouselCard borders by setting the bordered prop to true.
The carousel can showcase multiple slides simultaneously, offering flexibility in single or multiple slide increments.
It is recommended to include a preview of the next slide in the sequence to enhance user anticipation. Allow a recommended, 4%, of space to enable the next slide in the sequence to be visible.
Autoplay can be added through the Embla plugin Autoplay, but requires additional code to support accessibility.
- Continue cycling through the frames with 5–7s delays.
- Add a progress indicator.
- Pause the animation upon hover.
- Stop the slideshow upon any user interaction with content and do not resume, unless the user restarts it with the play button.
The example below demonstrates accessible autoplay for illustrative purposes.
The Embla API enables programmatic control, such as the visible slide.
Refer to the Embla documentation for the full API.