Carousel

A carousel is a rotating slideshow that cycles through a set of images or cards within a single space on a page. Rather than stacking every item vertically, a carousel shows one slide, or a few slides, at a time and lets the user move through the rest by clicking arrows, tapping dots, swiping on a touchscreen, or watching them advance automatically. It is a familiar pattern for homepage hero banners, product galleries, customer testimonials, and featured-content sections, wherever a designer wants to present multiple items while keeping the layout compact.

A carousel works by holding a series of slides in a container that displays only part of the set at once, then shifting which slide is in view in response to controls or a timer. Navigation controls, usually arrows and a row of indicator dots, let users move forward and back and show how many slides exist and which is currently active. Many carousels autoplay, advancing on a timer, and better implementations pause on hover or focus so users can read at their own pace. Accessible carousels are operable by keyboard, expose the current position and total count to assistive technology, provide a way to stop automatic motion, and respect a reduced-motion preference, because uncontrollable movement is both a usability and an accessibility problem.

The word comes from the Italian carosello, a tournament of horsemen that later gave its name to the rotating fairground ride, the merry-go-round of painted horses circling a central axis. The interface pattern borrows that image of a rotating set of items passing through a fixed viewing point, cycling around so that each slide comes into view in turn. The metaphor captures both the rotation and the idea that the same small stage shows a changing procession of content.

For a business, a carousel matters because it lets a single prominent area promote several things at once. On a homepage it can feature multiple campaigns, on a product page it can present many photographs of an item, and in a testimonials block it can rotate through social proof, all without consuming the vertical space that showing everything at once would require. Used thoughtfully, it packs a lot of merchandising or storytelling into a compact, visually engaging component.

The most common mistake is overestimating how much of a carousel users actually see. Research and practitioner experience consistently show that visitors focus overwhelmingly on the first slide and rarely engage with later ones, so cramming several important messages into a rotating banner often means the second, third, and later slides are largely ignored. Autoplay that moves too fast to read, or that cannot be paused, frustrates users and can carry an important message out of view before it is absorbed. Carousels can also hurt performance if they load many large images at once, and they frequently fail accessibility when controls are not keyboard operable. For these reasons many designers now prefer to place the single most important message in a static hero and reserve carousels for genuine galleries of comparable items. A carousel relates to adjacent patterns: it presents content in place rather than interrupting like a modal, it sometimes incorporates motion effects related to parallax scrolling, and while slides load it may show a skeleton screen to signal that images are on the way.