Carousel

A carousel is a fixed viewport over a sequence of slides — images, cards, testimonials, or any repeated content. Users move through the set with previous and next controls, swipe or drag gestures, and optional dot or thumbnail indicators.

The pattern is sequential browsing: give one item (or a short shelf of items) focus without stacking the full set vertically. How many slides are visible, whether the list loops, and whether autoplay runs are configuration choices — not different components.

Also known as

• Slider
• Slideshow
• Gallery slider
• Rotator
• Content scroller — marketing and CMS contexts

Component Anatomy

Common use cases

Use a carousel for a small, finite set of related items when one item, or a few items, should hold focus:

• Product and image galleries — browse photos without leaving the product or opening a new page
• Related content — articles, episodes, products, or profiles in a horizontal shelf
• Testimonials and case studies — give each quote room while keeping the section compact
• Feature tours — walk through a short sequence where order matters

Avoid a carousel when users need to scan or compare many items (use a grid or list), when critical information lives in later slides (many users never reach them), or when the set is very small — two or three items often work better as static cards. Prefer user-driven advance; treat autoplay as exceptional, pauseable, and off by default for essential content.

Single-slide carousels suit large images, stories, or ordered steps. Multi-slide carousels suit product and content shelves. Enable looping only when the sequence has no meaningful start or end; otherwise disable next on the final slide.