Carousels turn up on ecommerce homepages, product pages and the content rows on streaming sites, wherever a page has more items than the screen has room for. One container holds the lot, a few items show at a time, and people reach the rest with arrows, dots, a swipe or a timer.
Automatic rotation isn’t required. The W3C ARIA Authoring Practices Guide defines the pattern by its sequential display of slides and treats auto-start as a feature of some implementations, so a carousel that sits still until the user moves it still counts.
What Is a Carousel UI?
The W3C ARIA Authoring Practices Guide describes the pattern as a set of items, called slides, with one or more shown at a time. The pattern title includes slideshow and image rotator, though slider is the word most people use day to day.
It belongs with the other user interface components that reveal one piece of content by hiding another, accordions being the obvious relative.
Each slide is a container for an image, text, video or card. The slides sit on a track, a strip that moves behind the viewport, which is just the visible window. Next and previous buttons move the track, and a carousel that advances on its own needs a rotation control as well. Indicators, usually dots or thumbnails, show where the user is and let them jump to a different slide.
The Washington Post Design System lists a title, controls, content items and pagination dots in its anatomy, and sets a minimum of 4 items per carousel.
A carousel saves space by hiding content. That trade never changes, so every decision about one comes down to how much hiding the content can take.
What Types of Carousel UI Are There?
Hero, card, content row, testimonial and thumbnail carousels cover most of what shows up in design references, and each one fails in its own way.
| Type | Typical content | Usual placement | Main risk |
|---|---|---|---|
| Hero | Promotions, launches, announcements | Top of the homepage | Banner blindness, most views go to slide one |
| Product or card | Products, articles, case studies, categories | Mid-page and listing sections | Cards past the edge go unseen on mobile |
| Content row | Titles grouped by genre or topic (Netflix) | Stacked rows down a page | Row titles are mostly skipped |
| Testimonial | Customer reviews, success stories | Landing and service pages | Rotation removes proof before it is read |
| Thumbnail gallery | Product or portfolio images | Product pages | Thumbnails take space on small screens |
A hero carousel rotates promotional slides through the space where a single hero image would otherwise sit.
Shoppers on a product carousel are already browsing. Each slide is a card, usually an image and a title with a price underneath, so how the card is designed decides what they can judge without clicking. That’s where product card design earns its keep.
Material Design 3 skips content and sorts carousels by item size instead. According to the Android Developers documentation, multi-browse mixes items of different sizes, which suits scanning a lot of photos quickly. Uncontained keeps every item the same size and lets them run past the container edge. With hero, one large item sits in front with a small preview of the next. Full-screen is the odd one out: a single edge-to-edge item at a time, scrolling vertically, meant for content taller than it is wide.
How Do Users Move Through a Carousel?
Arrows and pagination dots are the standard controls, swipe and drag cover touch and mouse, and keyboard input and thumbnails fill in the rest. The carousel itself either waits for the user or advances on a timer.
Navigation controls
The W3C calls the arrows next and previous slide controls. Baymard says to put one on each side, with strong contrast and a size that’s visible at a glance.
Dots are small buttons for jumping to a particular slide. Baymard found that users miss them when they’re the only way to advance, as in the Staples app.
Swipe is what people expect on a touch screen, and Baymard says to offer it alongside buttons, never instead of them.
Keyboard users reach the same controls with Tab when they are native buttons, which the W3C recommends.
Thumbnails show every slide at once and let users jump straight to any of them.
Autoplay, looping and snapping
Autoplay is the setting that decides whether a carousel is usable or annoying.
On desktop, Baymard recommends autorotation, because it spreads exposure across slides and signals that the banner is a carousel. It comes with conditions. The interval should be reasonable and rotation should pause on hover, and it should stop completely once the user moves a slide by hand.
On mobile there should be no autorotation at all. A touch screen has no hover state, so a slide can change just as the user taps and send them to the wrong page.
Baymard’s case study points to Amazon’s homepage carousel as the desktop rule done right, since rotation stops the moment a user moves a slide by hand.
Looping returns to the first slide after the last, and the W3C pattern notes that rotation can also stop once every slide has been shown. Snapping makes the track settle on a slide boundary after a swipe or drag, so no slide sits half in view.
Do Carousels Work? What the Research Shows
Carousels work only when a short list of conditions is met, and Baymard Institute’s 2025 testing update found that many homepage carousels miss them. The same research found that a static content section performs as well and is simpler to get right.
That update also put numbers on how common these carousels are and how often they’re built badly.
- 33% of top US and European ecommerce desktop sites run a homepage carousel.
- 46% of sites with a homepage carousel have usability issues in the implementation.
- Short slides should stay up for 5 to 7 seconds, and text-heavy ones for up to 10 seconds.
Most users never see every slide, even when the carousel autorotates. Baymard’s participants clicked away or scrolled past before one full rotation, so the first slide gets far more exposure than any later one.
Most participants started with search or the main menu, sometimes before the homepage had finished loading. Slides that look like ads trigger banner blindness on top of that.
The sources disagree on autorotation. Baymard recommends it on desktop, with a sensible interval and with rotation pausing on hover and stopping after any manual interaction. Nielsen Norman Group’s 2013 usability study found users could not locate prominent content because it sat in an auto-rotating carousel.
Both findings stand, so the working rule is the narrower one. Keep control manual by default, and add autorotation only on desktop and only under the conditions Baymard sets.
Eye-tracking points the same way for labels. An analysis of the RecGaze dataset, published for SIGIR 2026, found that users largely skip carousel titles and go straight to the items.
RecGaze is, to the authors’ knowledge, the only public eye-tracking dataset for carousels, and its authors warn that the results may not carry over to other layouts or tasks.
Read together, the usability picture is conditional. Users act on the item they came for and ignore the text around it.
When Does a Carousel UI Fit, and When Does It Fail?
A carousel fits when users chose to browse, and fails when it carries content the page needs every visitor to see. The test is what happens to a slide nobody opens.
It’s defensible when users are already browsing items, as on a product page or a content row. Every slide should also have another route elsewhere on the page, and a slide nobody sees should cost the business nothing.
The Chrome team’s web.dev guidance (updated January 2021) says carousels work well where extra vertical space is not an option, and it names product pages as a good example. It also says slide destinations should be reachable by other paths, because few users engage with every slide.
Static sections are the usual replacement. H&M and Living Spaces, both shown in Baymard’s 2025 homepage research, put offers and main sections directly on the page instead of rotating them.
On the plus side, a carousel fits many items into one container, and swipe is a gesture mobile users already expect. It suits browsing tasks like galleries and product rows.
The costs are easier to miss. Controls, labels and pause logic all need building and testing, and slides tend to become a dumping ground for content no department wants to drop, a risk web.dev calls out. Large hero versions push useful content further down the page too, and Yale University’s usability guidance notes that this eats into the space above the fold.
A call-to-action placed on a slide is lost for every visitor who never reaches that slide.
Some institutions have picked a side. YaleSites does not offer a carousel block, and the Queensland Government health design system recommends a hero image on the homepage instead.
The web.dev guidance also calls autoplay rarely a good choice. That puts the Chrome team on the same side as Nielsen Norman Group in the autoplay disagreement, with Baymard’s conditional desktop rule as the outlier.
How to Make a Carousel UI Accessible
An accessible carousel has to be stoppable, and every control has to work from the keyboard. Screen readers need labels on the carousel and on each slide. The W3C ARIA Authoring Practices Guide and WCAG 2.2 define the details.
The Authoring Practices Guide builds the pattern from ARIA roles and properties.
- The container gets role region or group, aria-roledescription set to carousel, and a name from a visible label or aria-label.
- Each slide gets role group with aria-roledescription set to slide, named by its content or by its position, such as “3 of 10”.
- Previous, next and rotation controls should be native button elements.
- The live region is aria-live off while the carousel auto-rotates, and polite when it does not.
The rotation control comes first in the tab order inside the carousel, and its label switches between stop and start wording. Rotation also stops when keyboard focus enters the carousel or the mouse hovers over it, and focus-triggered stops do not resume unless the user restarts them.
The guide also covers how slide pickers can be built, and the styles differ mainly in tab stops. The basic style stops at rotation, previous and next controls. Tabbed adds slide pickers built as tabs, so the whole group is a single tab stop. Grouped puts one button per slide in the tab order, each its own stop, and that makes it the least friendly style for keyboard users.
WCAG 2.2 Success Criterion 2.2.2 (Level A) goes further. W3C lists auto-advancing presentations as auto-updating content and gives it no five second exception, so a mechanism to pause, stop or hide it must exist.
That makes pause on hover a useful extra, but not enough on its own. W3C says an animation that stops only while the user has focus on it does not count as a pause mechanism, and its sufficient techniques rely on a control the user can operate.
Level A is the lowest conformance level in web accessibility, so a carousel that fails it cannot claim any higher one.
How Does a Carousel UI Affect Page Speed?
A well-built carousel has little or no performance cost of its own, but the large images inside it often decide the page’s LCP score. That is the Chrome team’s position in web.dev’s carousel guidance, last updated January 2021.
| Metric | Good threshold | Carousel risk | Fix |
|---|---|---|---|
| LCP | 2.5 s or less | Hero slide is the LCP element and loads late | Put slides in the HTML, prioritize the first image |
| CLS | 0.1 or less | Non-composited slide animations, shifting controls | Animate with transform, reserve space |
| INP | 200 ms or less | Long-running carousel scripts | Replace heavy tooling |
Thresholds come from web.dev’s Core Web Vitals page (updated October 2024) and apply at the 75th percentile of page loads.
Loading slides with JavaScript is, per web.dev, probably the single biggest carousel performance mistake. The browser discovers the images late, and LCP pays for it.
Autoplay adds problems of its own. Until the user interacts, any slide can become the final LCP element, so web.dev advises keeping every slide at the same intrinsic size. And autoplaying slide transitions built on non-composited animations can repeat layout shifts indefinitely.
The same guidance covers some browser-version behavior. As of Chrome 88, images removed from the DOM count as LCP candidates, which matters for carousels that swap slides by removing the previous one. Chrome 121 made horizontally scrolling images use the same loading thresholds as vertical scrolling, so off-screen slides start downloading earlier, at the cost of more downloads.
Lazy loading belongs on slides outside the initial viewport, and never on the first one. In web.dev’s study of WordPress pages (updated March 2022), disabling lazy loading improved LCP by 13% to 15% on archive pages, and lazy loading only below-the-fold images matched that result.
That study covered WordPress pages, not carousels, so applying it to the first slide is an inference. It’s a safe one.
How to Build a Carousel UI
Start with native CSS scroll snap, and reach for a library only when the carousel needs autoplay, looping or thumbnails. A CSS carousel built on scroll snap needs no JavaScript for the snapping itself, according to web.dev.
- Place the slides in the page HTML, inside one scroll container, so the browser finds the images early.
- Give the container overflow-x: scroll, display: flex and scroll-snap-type: x mandatory.
- Give every slide a fixed width (flex: 0 0 100% for one slide at a time) and a scroll-snap-align value of center or start.
- Add visible previous and next buttons, and label the container and slides with the roles from the Authoring Practices Guide.
- Set width and height on slide images, and lazy load every slide after the first.
- Test with the Tab key, a screen reader and the reduced-motion setting.
Step 3 holds the main trap. MDN Web Docs says that with mandatory snapping, a child without a scroll-snap-align value cannot be scrolled into view.
Chrome and Edge 135 shipped ::scroll-button() and ::scroll-marker in April 2025, which generate the arrows and dots from CSS. The web-features data still listed Firefox and Safari as unsupported at the latest check, so wrap those rules in @supports and keep the snapping track as the fallback.
| Option | Dependencies | Accessibility and autoplay | Best fit |
|---|---|---|---|
| CSS scroll snap | None | Controls and labels are yours to add | Content rows, card carousels |
| Bootstrap carousel | Bootstrap CSS and JS | Respects reduced motion, autoplay pauses on hover | Sites already on Bootstrap |
| Swiper | None, modular | A11y is an opt-in module | Thumbnails, parallax, many frameworks |
| Splide | None, 12 kB gzipped | Accessibility option adds ARIA, autoplay has a pause toggle | Small bundle, accessibility defaults |
| Embla Carousel | None, plugin-based | Accessibility and Autoplay are separate plugins | Custom markup and styling |
The Bootstrap carousel documentation itself recommends avoiding autoplay and asks for an extra pause button when it is used. Nested carousels are listed as unsupported. Setting data-bs-ride to true instead of carousel delays the first slide change until the user interacts.
Embla keeps accessibility out of its core, and the Salt design system, which builds its carousel on Embla, notes that adding autoplay requires extra code to stay accessible.
Pick the smallest tool that covers the controls you need. Every added module is another accessibility surface to test, and I’d rather test less.
Carousel UI FAQ
What is the difference between a carousel, a slider and a slideshow?
For content display, none. The W3C pattern lists slide show and image rotator as other names for a carousel.
Slider is the term to watch, since many design systems also use it for a numeric range input.
Are vertical carousels still carousels?
Yes. Material Design 3’s full-screen layout shows one edge-to-edge item at a time and scrolls vertically, according to Android Developers documentation.
The W3C definition says nothing about direction.
Can one page hold more than one carousel?
Yes, but each moving carousel adds a control burden. W3C recommends a single mechanism that pauses every moving or auto-updating element on the page.
Separate controls per element still pass WCAG 2.2.2, but users must stop each one by hand.
Do carousels hurt SEO?
The documented risk is text baked into slide images. Baymard (2025) says slide text should be real HTML text, and notes this is typically better for SEO.
web.dev (2021) adds that embedded text also hurts accessibility, localization and compression.
How can a mobile carousel show there is more to swipe?
Let the next slide peek in at the edge. The Salt design system recommends reserving 4% of the width for it.
MetLife’s design system adds dots, arrows or a View All link as further cues.
Measuring Whether a Carousel UI Earns Its Place
A carousel UI earns its place when slides after the first draw clicks, and click-through rate per slide position is the metric that shows it. web.dev’s carousel guidance (updated January 2021) names click-through rate as the test of whether a carousel and its content work.
Track each slide separately. A single overall rate averages a busy first slide with idle later ones and hides the split.
Log clicks per slide position and compare the later slides against slide one. Any slide that sits idle can move into a static section.
The price of removal is a longer page. Baymard (2025) found that users reach promoted content by scrolling, which keeps the swap cheap.
If the data says keep it, a walkthrough of making a carousel in Figma covers the prototype step.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
