Carousel
Carousels are comprised of a rotating set of slides, primarily used to highlight content that is prominent but not essential to completing a task. They usually contain between two to five slides, slide number indicator, and navigational arrows that allow the customer to rotate the slide manually. Carousels may also be known as a slider, a slideshow, or a gallery.
On this page
Interactive Demo
This demo lets you preview the carousel component, its variations, and configuration options.
Carousel Variations
There are two types of Carousel variations.
1. Manual Control
Manual control carousels allow the customer to discover the content of a carousel by using the controls provided. Manual rotate may have full width slides or show more than one slide at a time as cards. Use this carousel when some content is more important or prominent than others. Manual control has the option to display slide controls on or off the slides.
2. Auto-rotate
Auto-rotate carousels automatically display slides on rotation, based on a specified delay. Users can manually rotate and pause slides if needed. Use when the rotating slides are equal in importance or prominence. Auto-rotate has the option to display slide controls on or off the slides.
What’s New
- Updated checkbox to follow 8x system
- Change the slide control to a contained consistent pattern for above and below content
- Removed the dependancy on hero
- Maintained minimum target size to meet accessibility requirements
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.