A carousel, also called a slider or slideshow, shows several images or cards in the same space one after another. Visitors move through them with arrows, by swiping on a phone, or by tapping dots underneath, and some carousels advance on their own every few seconds.
How a carousel moves
The slides sit side by side in a strip that is wider than the visible window. Only the part of the strip inside the window shows; moving to the next slide shifts the strip sideways, usually with a CSS transform so the animation stays smooth. Modern CSS scroll snapping can produce a swipeable carousel with very little JavaScript: the strip scrolls horizontally and the browser snaps each card into place. Autoplay, looping and dot indicators are added with scripts.
On social platforms the same word means a post with several swipeable images, such as an Instagram carousel post. On websites it is a page component.
A typical use: testimonials and product images
An online furniture store shows six photos of each sofa in a carousel under the main image: front, side, fabric close-up, in a living room. The shopper swipes through them in place instead of scrolling past six full-size photos. Further down the homepage, a strip of customer reviews scrolls sideways so three are visible at once on desktop and one at a time on a phone.
Do carousels belong on your homepage?
Usability researchers, notably the Nielsen Norman Group, have long warned that rotating banners at the top of a homepage are widely ignored, and that slides after the first get little attention. If your hero section rotates between five messages, most visitors see one, and it may not be the one you care about. One strong image and one clear message usually serve a small business better. Carousels earn their place for browsing similar items: product photos, portfolio pieces, reviews.
Carousel mistakes
- Autoplay with no pause. Slides that move while someone is reading are frustrating, and WCAG requires a way to pause, stop or hide motion that lasts more than five seconds.
- Loading every slide up front. A carousel of ten large photos can slow the page. Load later slides with lazy loading, but never the first one, which is often the Largest Contentful Paint element.
- Height that jumps. Slides of different heights resize the strip as it moves and push content around, hurting layout stability. Give the container a fixed aspect ratio.
- Tiny controls. Arrows and dots too small to tap on a phone make the carousel hard to use.
- Key information on slide four. Treat anything after the first slide as optional viewing.
Related terms
- Hero section: where rotating banners most often appear.
- Lazy loading: keeps off-screen slides from slowing the page.
- Cumulative Layout Shift: what a resizing carousel can damage.
- Web accessibility: rules on motion and controls.