Baymard Institute found that 46% of e-commerce sites with a homepage carousel have usability problems. Yet carousels remain one of the most widely used components on the web. So what is a carousel UI, and why does it keep showing up despite years of criticism?
A carousel is a sliding content component that displays images, product cards, or text blocks one at a time within a fixed container. Users advance through slides using arrows, dots, swipe gestures, or auto-rotation.
This guide covers how carousels work, where they’re used, the real usability data behind them, accessibility requirements, performance impact, and how to build one that doesn’t hurt your site. Whether you’re choosing a carousel library or deciding if you need one at all, you’ll find what you need here.
What Is a Carousel UI
A carousel UI is a user interface component that displays multiple pieces of content (images, cards, text blocks) in a single horizontal container. Users see one item or a small group at a time and move through the rest using navigation arrows, pagination dots, swipe gestures, or auto-rotation.
You’ll also hear them called sliders, slideshows, or content rotators. Each term carries a slightly different meaning in practice, but they all describe the same core mechanic: cycling through content within a fixed space.
Carousels sit in the same category as tabs, accordions, and other progressive disclosure patterns. The shared idea is that not everything needs to be visible at once. You show what matters first and let the user decide whether to see more.
Baymard Institute’s 2025 research found that 33% of top US and European e-commerce desktop sites still use a homepage carousel. The number is even higher on mobile. That kind of adoption tells you something: despite years of criticism, this component isn’t going anywhere.
Anatomy of a Carousel Component
Every carousel shares the same basic parts, even when the visual treatment looks completely different.
Viewport container: The visible frame that holds the current slide. It clips off-screen content and defines the display area within your viewport.
Slides: Individual content panels. These can hold images, cards, text, video, or any combination.
Navigation arrows: Left and right controls for advancing through the slide set. CSS arrows are a common approach for styling these.
Pagination indicators: Dots, thumbnails, or numbered markers showing position within the sequence and total slide count.
Transition effects (slide, fade, scale) change how content moves between states. Touch targets and swipe zones handle mobile interaction. These details seem small, but they drive whether the component feels smooth or frustrating.
How Carousel UIs Work in Practice
The biggest split in carousel behavior comes down to one thing: who controls the movement.
User-initiated carousels stay still until someone clicks an arrow, swipes, or taps a pagination dot. The user decides the pace. Auto-advancing carousels rotate on a timer, cycling through slides whether anyone interacts or not. Nielsen Norman Group has warned against auto-forwarding for years, calling it a conversion problem.
Look, I’ve lost count of how many times I’ve tried to read a slide and had it yank away before I finished. That’s the fundamental issue with auto-play. It removes control from the person you’re supposedly trying to help.
Looping vs. Finite Slide Sets
Some carousels loop infinitely. You hit the last slide, and the next arrow cycles you back to the first. Others stop at the end, disabling the forward arrow.
Infinite looping works for product browsing where you want continuous exploration. Finite sets make more sense for hero banners or storytelling sequences where order matters.
Responsive Behavior
On desktop, carousels typically show navigation arrows and sometimes thumbnails. On touch devices, swipe gestures take over. A good responsive design handles this transition seamlessly, using media queries to adjust touch targets, slide dimensions, and control placement at each breakpoint.
Performance also shifts across screen sizes. Lazy loading off-screen slides keeps the initial page load fast. Without it, a ten-slide image carousel can easily blow up your Largest Contentful Paint score.
Common Implementation Approaches
| Method | Good For | Tradeoff |
|---|---|---|
| CSS scroll-snap | Lightweight, no-JS carousels | Limited control over transitions |
| JavaScript libraries (Swiper, Embla) | Full-featured with touch, lazy loading | Bundle size, dependency management |
| Framework components (React, Vue) | Tight integration with app state | Framework lock-in |
CSS scroll-snap has come a long way. For simple galleries, it’s often enough. But the moment you need auto-play controls, ARIA announcements, or complex transition effects, a JavaScript library saves time.
Common Types of Carousel UIs
Not all carousels do the same job. The type you choose depends on what content you’re showing and how users are expected to interact with it.
Hero and Banner Carousels
Full-width, sitting right above the fold. These are the ones you see on homepages, rotating through promotional messages, seasonal campaigns, or key product launches. They usually show one slide at a time with large imagery and a call-to-action button layered on top.
They’re also the most criticized type. Erik Runyon’s research at Notre Dame found that only 1% of visitors clicked on the homepage carousel, and 84% of those clicks landed on the first slide. Everything after slide one barely exists for most users.
Product Carousels
These show multiple items at once, typically as product cards in a horizontal row. You swipe or click to see more. Amazon, Shopify storefronts, and pretty much every e-commerce site uses this pattern.
Product carousels actually perform well. Mobify’s research across mid-to-large e-commerce sites found that 72% of users interacted with product image carousels at least once, with 23% tapping directly to zoom. That’s a completely different story from homepage banners.
The difference? Users are actively shopping. They expect to browse. The carousel serves their intent instead of pushing messages at them.
Thumbnail and Gallery Carousels
Image-heavy contexts like portfolios, real estate listings, or photo galleries. Usually paired with a lightbox for full-screen viewing. A strip of thumbnails below the main image lets users jump to specific shots.
Testimonial and Content Card Carousels
Social proof blocks, blog post teasers, team member highlights. These rotate text-heavy cards where each slide contains a quote, name, and maybe a small photo. Shorter slide counts work best here because nobody wants to click through fifteen testimonials.
Multi-Item vs. Single-Item Display
| Display Type | Best Use | Typical Slide Count |
|---|---|---|
| Single-item | Hero banners, featured content | 3–5 |
| Multi-item (3–4 visible) | Product rows, related articles | 8–20+ |
| Vertical carousel | Story formats, mobile onboarding | 5–10 |
Vertical carousels are less common but gaining ground. Instagram Stories and TikTok-style feeds are, at their core, vertical carousel patterns.
Where Carousels Are Used Across the Web
Carousels show up in more places than most people realize. Some implementations are obvious. Others you use every day without thinking about it.
E-Commerce Storefronts
Product detail pages, category browsing, “customers also bought” sections. Landing pages for seasonal sales. Amazon alone uses multiple carousel patterns on a single product page: the main image gallery, related products, and sponsored items all slide horizontally.
Global e-commerce sales hit $6.42 trillion in 2025, and visual merchandising through carousels is one of the primary ways these stores display product variety without overwhelming the page layout.
Streaming Platforms
Netflix’s entire browse experience is rows of carousels. Each genre category is a horizontal sliding list. Users expect this pattern here because they’re actively exploring, and the carousel lets them scan dozens of titles without scrolling through a massive grid layout.
Spotify uses the same pattern for playlists, albums, and podcast recommendations.
News and Content Aggregators
Reuters, BBC, and major news outlets use carousels for featured stories and topic clusters. These often combine tabs with carousel mechanics, letting readers filter by category and then swipe through stories within that section.
Mobile Apps and Onboarding Flows
Mobile-first design pushed carousels into onboarding screens, app walkthroughs, and feature tours. If you’ve ever opened a new app and swiped through three or four intro screens before hitting “Get Started,” that’s a carousel.
By the way, Google’s own search results page uses carousels too. Those horizontally scrolling recipe cards, top stories, and “people also search for” sections? All carousel UI patterns, right there in the SERP.
Usability Problems with Carousel UIs
Carousels are probably the most debated interactive element in web design. The criticism isn’t theoretical. It’s backed by years of usability research.
Low Engagement Past Slide One
Erik Runyon’s Notre Dame study remains the most cited data point. Only 1.07% of homepage visitors clicked on any carousel slide. Of those clicks, the first slide captured the vast majority.
That means slides two through five are functionally invisible to most of your audience. You could put a 50% off coupon on slide four and almost nobody would see it.
Baymard Institute’s 2025 data confirmed this pattern, finding that 46% of e-commerce sites with homepage carousels have implementation problems that make the issue worse.
Banner Blindness
Users have trained themselves to ignore anything that looks like an advertisement. Large, rotating, promotional-looking content at the top of a page? That checks every “ad” box in the user’s brain.
Carousel features, especially auto-rotating ones, trigger this behavior almost immediately. People scroll right past them.
Auto-Play Creates Friction
Auto-rotating carousels take control away from the user. Nielsen Norman Group flagged this as a conversion problem. The slides move on their own timer, and if someone is mid-read when the content changes, they have to either chase the slide or give up.
It’s also an accessibility violation. WCAG 2.1 Success Criterion 2.2.2 requires a pause, stop, or hide mechanism for any auto-updating content. Without it, users with cognitive or visual disabilities can’t process the information at their own pace.
Hidden Content Reduces Discovery
Anything not visible on screen at the moment of viewing might as well not exist. That’s the harsh reality of progressive disclosure done poorly. If your key message sits on slide three of five, most visitors will never encounter it.
Nielsen Norman Group ran a usability test where they asked a user to find a specific promotion on the Siemens homepage. The offer was on the first slide of the carousel. The user still failed to spot it.
The “Should I Use a Carousel” Debate
The website shouldiuseacarousel.com exists for a reason. It links to study after study showing carousels underperform. Jared Smith, Brad Frost, and other practitioners have written extensively against them.
But here’s the thing. Carousels persist because they solve a real organizational problem. When five departments each want homepage real estate, a carousel gives everyone a slot. It’s not a user-centered design decision. It’s a stakeholder compromise.
Conversion expert Karl Gilis put it bluntly: carousels exist because they make the web team’s life easier, not because they make visitors happy.
The criticism is valid for homepage hero banners. For product browsing contexts where users control the interaction, carousels work significantly better. Context determines everything.
Accessibility Requirements for Carousels
The WebAIM Million 2025 report found that 94.8% of the top one million homepages had at least one detectable WCAG failure. Carousels contribute to this problem regularly because they combine movement, hidden content, and complex interaction into a single component.
Getting carousel accessibility right isn’t optional. It’s a legal and ethical requirement.
Keyboard Navigation
Users must be able to move between slides using arrow keys and tab through any interactive elements (links, buttons) within each slide.
If your carousel traps keyboard focus or skips slides entirely when someone presses Tab, it’s broken for anyone who doesn’t use a mouse. That includes power users, people with motor disabilities, and screen reader users.
Pause and Stop Controls
WCAG 2.1 Success Criterion 2.2.2 is clear: any content that auto-advances must have a visible mechanism to pause, stop, or hide it.
No exceptions. No “well, it only rotates every 8 seconds.” If it moves without user input, there needs to be a pause button. Amazon gets this right by pausing the carousel on hover.
ARIA Roles and Screen Reader Support
The W3C WAI carousel tutorial outlines the reference implementation. Key ARIA attributes include:
- role=”region” with aria-roledescription=”carousel” on the outer container
- aria-label describing the carousel’s purpose
- Live region announcements for slide changes so screen readers communicate transitions
- Proper focus management when new slides appear
WebAIM found that pages using ARIA actually had over twice as many errors (57 on average) compared to pages without ARIA (27 on average). The problem isn’t ARIA itself. It’s that developers apply it incorrectly. A carousel with wrong ARIA markup is worse than one with no ARIA at all.
Following the web accessibility checklist before shipping any carousel implementation catches most of these issues early.
How to Build a Carousel That Actually Works
Most carousel problems come from the same handful of mistakes. Auto-play enabled by default. Too many slides. No visible controls. Bad image optimization. Fixing these gets you most of the way to a carousel that people will actually use.
An Adobe Optimization Manager tested removing a homepage carousel entirely and replacing it with static content. The result was a 23% increase in sales, according to Econsultancy. That’s not an argument against all carousels. It’s an argument against bad ones.
Design Decisions That Matter
Default to user-controlled. No auto-play. If stakeholders insist on rotation, set the interval to at least 5 seconds and include a visible pause button.
Keep slide counts low. Hero banners should have 3 to 5 slides. Product carousels can stretch longer because the browsing intent is different.
Make navigation obvious. Visible arrows, clear pagination, and enough white space around controls so users don’t miss them on mobile.
Every slide needs a purpose. If you can’t explain what action a specific slide should drive, cut it.
Performance Optimization
Carousels can hit all three Core Web Vitals if you’re not careful.
| Core Web Vital | How Carousels Cause Problems | Fix |
|---|---|---|
| LCP (under 2.5s) | Hero images are often the largest element on the page | Preload the first slide image, use WebP/AVIF format |
| CLS (under 0.1) | Slides without set dimensions shift layout on load | Set explicit width and height on the container |
| INP (under 200ms) | Heavy JS libraries block the main thread | Use lightweight libraries, defer non-critical scripts |
SpeedCurve documented that Amazon’s homepage carousel triggered poor CLS scores because slide transitions used layout-shifting properties instead of CSS transforms. Using the transform property for transitions avoids this entirely.
Sites passing all three Core Web Vitals thresholds see 24% lower bounce rates, according to Digital Applied’s 2026 analysis.
Choosing a Carousel Library or Framework
The library you pick determines your bundle size, accessibility baseline, and how much custom work you’ll need.
Lightweight options:
- Embla Carousel, roughly 7KB gzipped, dependency-free, full WCAG support
- Keen-Slider, hooks-based API, great touch interaction
- Splide, written in TypeScript, no dependencies, built-in accessibility
Full-featured options:
- Swiper, 45KB+ gzipped but modular, used by over 714k developers
- CSS-only carousels using scroll-snap work for basic galleries without any JavaScript dependency
Slick Carousel and Owl Carousel still show up on older sites. Both depend on jQuery, which adds weight. If you’re maintaining legacy code, they work. For new projects, Embla or Swiper is the better call.
Took me a while to stop defaulting to Slick for everything. Old habits. But once I tried Embla on a Shopify project, the performance difference was hard to ignore.
Carousel UI vs. Other Content Display Patterns
A carousel is one way to display content. It’s rarely the only way. Knowing when to use it (and when to reach for something else) separates thoughtful UI design from pattern-matching.
Carousel vs. Grid Layout
A grid system shows everything at once. No hidden content. No clicking through slides. That makes grids better when all items carry equal weight and the user needs to compare them side by side.
Carousels win when screen space is tight (especially on mobile) or when you have more than 8 items and don’t want to stretch the page vertically. Netflix wouldn’t work as a grid. Your mileage may vary on a portfolio site.
Carousel vs. Tabs
Tabs label their content upfront. You see “Features,” “Pricing,” “Reviews” and pick the one you want. Carousels don’t label individual slides this way. The user has to click through to discover what’s there.
Key difference: Tabs work when content categories are distinct and named. Carousels work when items are similar in type but different in specifics, like products in the same category.
Carousel vs. Accordion
Accordions are vertical progressive disclosure. Click a heading, content expands below it. They handle text-heavy content well because each section gets its own label.
Carousels handle visual content better. Trying to stuff paragraphs of text into a sliding carousel is a recipe for frustration, especially on mobile devices where reading while swiping is unpleasant.
When to Use Which
| Pattern | Best For | Avoid When |
|---|---|---|
| Carousel | Visual browsing, product rows, limited space | Critical info that can’t be missed |
| Grid | Equal-weight items, comparison shopping | 30+ items (page becomes too long) |
| Tabs | Distinct categories with labels | More than 5 categories |
| Accordion | FAQ content, text-heavy sections | Image-focused content |
The decision often comes down to how many items you’re showing, what type of content they are, and whether hiding some of it is acceptable for the context. If hiding content risks someone missing something critical, don’t use a carousel.
How Carousels Affect Page Performance and Search Visibility
Carousels don’t just affect what users see. They affect whether Google considers your page fast enough, stable enough, and useful enough to rank well.
Core Web Vitals Impact
WP Rocket’s performance tests showed that just adding Slick Carousel (plus jQuery) knocked 9 points off a Lighthouse mobile score on a minimal page. On a real e-commerce site with dozens of other scripts, the impact is worse.
Auto-playing carousels are especially problematic for Cumulative Layout Shift. SpeedCurve’s analysis showed that auto-rotating slides can cause continuous, infinite layout shifts when animations use layout-triggering properties like width or margin instead of transform.
Google’s recommended CLS threshold is under 0.1. A poorly built carousel can blow past that on its own.
Search Engine Crawlability
Google can crawl and index carousel content as long as it’s in the HTML DOM. All slides should exist in the page markup, not loaded on demand via Ajax calls that search crawlers can’t trigger.
CSS-hidden slides (using display: none or overflow: hidden) are still in the DOM and crawlable. JavaScript-rendered slides that only load on interaction are not.
Schema.org’s ItemList markup lets you create structured data for carousel-style content. Google uses this for rich results like recipe carousels, course listings, and product sets in search.
The Indirect SEO Effect
A one-second delay in page response leads to a 7% decline in conversions, according to Metric Theory’s research. If a carousel adds two seconds of load time through unoptimized images and heavy JavaScript, the content inside it would need to improve conversion rates by 14% just to break even.
That math almost never works in the carousel’s favor.
Bad carousels contribute to pogo-sticking, where users bounce back to search results because the page didn’t give them what they needed. This signals low satisfaction to Google’s ranking systems. It’s an indirect penalty, but a real one.
The web design principles that apply everywhere else apply here too. Visual hierarchy matters. Speed matters. And user experience comes before any design trend. Build carousels that serve the user, test their impact, and be willing to remove them if the data says they’re hurting more than they’re helping.
FAQ on Carousels
What is a carousel UI in web design?
A carousel UI is a sliding component that displays multiple content items (images, cards, text) within a single container. Users see one item at a time and move through the rest using arrows, dots, or swipe gestures.
Are carousels bad for user experience?
It depends on context. Homepage hero carousels often get ignored, with barely 1% click-through rates according to Notre Dame’s research. But product carousels where users actively browse perform significantly better.
What is the difference between a carousel and a slider?
They’re mostly the same thing. “Slider” often refers to a single-item slideshow with transition effects. “Carousel” typically implies multiple visible items or a rotating set. In practice, developers use both terms interchangeably.
Do carousels hurt SEO?
They can. Heavy JavaScript libraries slow page load times, affecting Core Web Vitals like LCP and CLS. Auto-playing carousels cause layout shifts. If slides load via Ajax instead of being in the HTML, Google may not crawl them.
What are the best carousel libraries in 2025?
Embla Carousel and Keen-Slider lead for lightweight performance. Swiper is the go-to for full-featured builds. Splide offers strong accessibility out of the box. CSS scroll-snap works for simple galleries without any JavaScript.
How many slides should a carousel have?
Hero banners work best with 3 to 5 slides. Product carousels can be longer since users are actively browsing. More slides means more hidden content, and most users never get past the first two.
Should carousels auto-play?
No, in most cases. Auto-rotating carousels remove control from the user and trigger banner blindness. WCAG 2.1 requires a pause mechanism for any auto-advancing content. User-controlled carousels consistently outperform auto-play versions.
Are carousels accessible?
They can be, but most aren’t by default. Proper carousel accessibility requires keyboard navigation, ARIA roles like aria-roledescription=”carousel”, pause controls, and screen reader announcements for slide changes. The W3C WAI tutorial covers the reference pattern.
What can I use instead of a carousel?
A static hero image, a grid layout, tabs, or an accordion. Grids show all items at once. Tabs label content categories upfront. The right alternative depends on content type, item count, and available screen space.
When should I actually use a carousel?
Use carousels for visual browsing contexts where users expect to explore, like product galleries or media platforms. Avoid them for critical messaging. If hiding content on later slides risks someone missing something important, pick a different pattern.
Conclusion
Understanding what is a carousel UI goes beyond knowing how a slideshow component works. It means knowing when this interaction design pattern helps your audience and when it gets in the way.
The data is consistent. Most homepage banner carousels underperform. Product image galleries and content browsing contexts tell a different story, with engagement rates that justify the pattern when built correctly.
Prioritize keyboard navigation, WCAG compliance, and lightweight libraries like Embla or Splide. Set explicit dimensions on your container to protect your Cumulative Layout Shift score. Skip auto-rotation unless you give users a clear pause control.
Test slide-level click-through rates. Track whether the carousel actually moves the metric you care about. If it doesn’t, a static hero image or a simple card layout might serve your visitors better.
Build for people first. The component should earn its place on the page.
