Carousel
The Carousel is now part of CDS. It pairs a Swiper-based slide track with a CDS-branded progress indicator below the slides — a row of segmented item buttons where each tab represents one slide and shows a short label, with a 4 px progress bar that reflects the active slide visually.
Reach for the Carousel when you have a small, curated set of slides (typically three to five) that share a context — hero rotations, campaign highlights, media galleries — and where each slide stands on its own without depending on being read in sequence. Skip it when slides need to be read or compared (use tabs or side-by-side cards instead), when there are more than five or six items, or when keyboard and screen-reader users would have to wade through every slide just to reach the next page section.
Slides accept arbitrary children — no hard-coded card layout. Touch and swipe gestures work on mobile and tablet; arrow keys move the active slide on desktop. Active-slide and active-tab state stay in sync in both directions, and the auto-advance progress animation respects prefers-reduced-motion. Use position utilities (p-relative on the carousel, p-absolute at-bottom inset-lg on the controls) to overlay the progress indicator consistently across breakpoints.
Full anatomy, recipes, and accessibility guidance are on the Carousel documentation page.