Carousel

You open a shopping app and start reading the banner: “Free delivery on orders over…” and it slides away. You tap a dot to bring it back and get a different slide. You try to scroll down past it and the page doesn’t move. Meanwhile, the app has quietly downloaded 12 MB of pictures you’ll never see.

A carousel is one of the most common components on the web and in apps, and one of the most argued about. For testers it’s a goldmine: it moves by itself, reacts to gestures, loads images, and has to stay usable for keyboard and screen reader users.

What is it?

A carousel shows one slide (or a few) at a time from a set, in a horizontal strip. Users move through it by swiping, clicking arrows, or tapping dots. Some carousels move by themselves (autoplay).

You’ll meet three main kinds:

• Hero carousels: big rotating banners at the top of a home page (“Summer sale”, “New collection”).
• Product image galleries: several photos of one product, swiped on a product page.
• Content rows: a horizontally scrolling row of cards, like “Popular near you” in a food delivery app or “Continue watching” on a streaming site.

Anatomy

Designs & variants

The three kinds behave differently and break differently. Try each one: swipe with a finger or drag with the mouse, use the arrows and dots, hover over the hero and watch it pause.

ShopNow

1 / 5

Front

Side

Back

Detail: zip

On a hike

Ridge Day pack 22 L

€79.00

Popular near you

• Pizza Roma 4.7 · 25 min · €1.99
• Green Bowl 4.7 · 15 min · Free
• Pho House 4.6 · 30 min · €2.49
• Café Mila 4.6 · 10 min · Free

When to use it

Carousels have a bad reputation, and part of it is earned. Be fair to both sides:

• The critique: hero banners get very little engagement. A widely quoted 2013 measurement from the University of Notre Dame website found that only about 1% of homepage visitors clicked a carousel slide, and most of those clicks (about 84%) went to the first slide. Usability studies (for example by the Nielsen Norman Group) also found users often skip banners because they look like ads, and get annoyed when text moves before they finish reading.
• Where carousels do work: when the user is in control and the slides are the same kind of thing: photos of a product, a row of restaurants or films, onboarding screens. Product image galleries are used heavily because people actively want to see more photos.

So carousels are a good choice when:

• The items are similar and browsable (photos, cards), and users choose to see more.
• Space is limited and a peek of the next item invites swiping.
• The first slide still works on its own, because many users never see the others.

Good and bad uses

How good carousels behave

Autoplay can always be stopped

If slides move by themselves for more than 5 seconds, users must be able to pause, stop or hide them. That’s WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary → success criterion 2.2.2 Pause, Stop, Hide (Level A, the minimum level). In practice a good carousel:

• Has a visible Pause/Play button, not a hidden gesture.
• Pauses on hover (mouse) and while keyboard focus is inside it.
• Stops for good once the user takes control (swipes, clicks an arrow or dot).
• Gives each slide enough time to read it: at least 5 seconds, more for longer text.
• Doesn’t autoplay when the user has asked for reduced motion (see below).

Swipe, arrows and dots all work, on every input

• Swipe on touch, and drag or arrows with a mouse. A desktop user without a trackpad can’t swipe, so arrows (or visible scroll buttons) are needed.
• A swipe needs a small threshold before it counts (the touch slopTouch slopThe small distance a finger may move before a touch counts as movement instead of a tap.Open in glossary →), so a slightly wobbly tap isn’t a swipe.
• Vertical swipes must scroll the page. A carousel only owns horizontal gestures. If you can’t scroll the page when your finger starts on the carousel, that’s a bug (a classic nested scrollingNested scrollingHow a scrollable list inside a draggable or scrollable container decides which one moves.Open in glossary → problem).
• Dots are tiny on purpose, but their tap area must not be. Aim for 44×44 pt (iOS) / 48×48 dp (Android); on the web, WCAG 2.2 asks for at least 24×24 CSS px (2.5.8, level AA). Tiny targets close together cause wrong taps.

Looping or clear ends

Either works, but be consistent:

• Looping carousels go from the last slide straight to the first, seamlessly. A visible “rewind” through all slides, a flash or a duplicated slide is a bug.
• Non-looping carousels (product galleries) have clear ends: the Previous arrow is hidden or disabled on slide 1, Next on the last slide, and a swipe past the end bounces back.

The counter and dots always tell the truth

“2 / 5”, the active dot and the slide shown must agree after a swipe, an arrow, a dot tap, autoplay, rotation and coming back from another screen. Screen readers should hear the same: “slide, 2 of 5”.

Images load smart

Carousels are heavy: five 2 MB banners is 10 MB, often on a mobile connection.

• Lazy-loadLazy loadingLoading images or content only when the user scrolls near them.Open in glossary → slides that aren’t visible yet (load the next one just before it’s needed).
• But never lazy-load the first slide: it’s often the biggest thing on the page, and delaying it hurts the Largest Contentful Paint (one of the Core Web VitalsCore Web VitalsGoogle's key page experience metrics: loading (LCP), responsiveness (INP) and visual stability (CLS).Open in glossary →).
• Serve sized images: a phone doesn’t need a 2400 px desktop banner.
  Dev note

  On the web that’s srcset.
• Show a placeholder with the right size while an image loads, so the page doesn’t jump.

Aspect ratio and cropping

The same image is shown in very different shapes: wide on desktop, square on a phone. Images are usually cropped to fill the slide. Text “baked into” a banner image, or a product near the edge, gets cut off. Try it:

Dev note

CSS object-fit: cover.

Slide shape

21:9 desktop16:94:3 tablet1:1 phone

Fit

Cover, centeredCover, focal point leftContain

Image file

1600 px wide320 px (stretched)

The headline is cut off. Text baked into the image does not survive cropping.

Things to check: is the important part (product, face, headline) visible at every breakpoint? Is the image sharp on high-density screens, or a small file stretched up? Do all slides have the same height, or does the page jump when slides change?

Common bugs

#	Bug	What you see	Typical severity
1	Autoplay can’t be paused	Slides keep moving while you read, hover or tab into it	Medium–High (accessibility: fails WCAG 2.2.2)
2	Tiny or overlapping dot targets	Tapping a dot opens a different slide	Medium
3	Vertical scroll blocked	Page won’t scroll when the swipe starts on the carousel	High
4	Counter or dots out of sync	“1 / 5” on every slide, wrong dot active	Low–Medium
5	Visible loop jump	Rewinds through all slides, flashes, or shows a slide twice	Low
6	All images loaded up front	Slow first load, many MB of data on mobile	Medium
7	Bad crop or blurry image	Headline cut off on phones, pixelated banner	Medium
8	Focus lost in hidden slides	Tab goes to links on invisible slides	Medium
9	Swipe triggers a click	Dragging a slide opens the promo link	Medium
10	Layout jump	Page content jumps when slides of different heights load	Low–Medium

Stress-test it

This is a correct carousel. Switch features on and off and watch the Autoplay status, the screen reader text and the network log. Hover over the carousel, Tab into it, drag a slide, turn on Reduced motion, and compare lazy loading and sized images on and off. Show touch targets draws the real tap areas.

AutoplayLoopReduced motionLazy-load imagesSized images (srcset)Show touch targets

Autoplay

Screen reader on the slide

“Summer sale, slide, 1 of 5”

While autoplay runs, slide changes are not announced (aria-live off). Paused, they are.

Network · images0 req · 0 KB

Find the bug

This shopping app’s home screen has a hero carousel with six bugs. Explore it like a tester:

• Watch it for a while, then try to read a slide, hover it, and stop it.
• Tap each dot and check which slide opens.
• Try to scroll the page by dragging (mouse) or swiping (touch) starting on the banner, then starting below it.
• Watch the counter and the VoiceOver text. Let it reach the last slide and see how it gets back to the first.
• Read the Network log.

🐞 Bug hunt: ShopNow home

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

ShopNow

Search outdoor gear

1 / 5

Categories

ShoesTentsBagsJackets

Popular now

• Trail runner 2€129
• Ridge day pack€79
• Dome tent 2P€189
• Sun hat€24
• Merino tee€49
• Camp mug€12

You’ve reached the end · Help · Returns

With a mouse, drag the screen up and down like a finger. On a phone, just swipe.

VoiceOver on the banner

Restart app

“Summer sale. Slide 1 of 5.”

Network (app launch)0 req · 12.4 MB

1. 1

   Hint: Try to read a slide. Hover over it. Look for a pause button.

   Autoplay cannot be paused

   Slides change every 3 seconds, there is no Pause button, and it keeps moving on hover and right after you swipe. This fails WCAG 2.2.2 Pause, Stop, Hide and makes the text hard to read. Expected: a visible Pause button, pause on hover and focus, and autoplay stops once the user interacts.

   Reveal answer✓ I found this
2. 2

   Hint: Tap the first dot, then the second. Which slide appears?

   Tapping a dot opens the slide next to it

   The dots are 8 px. The developer gave each one a bigger invisible hit area, but anchored it on the wrong side, so it covers the dot on its left. Tapping dot 1 opens slide 2, and so on (only the last dot works). Expected: each dot has its own tap area of at least 24×24 px (better 44×44 pt) that doesn’t overlap its neighbors. You can see the hit areas in DevTools by inspecting the buttons.

   Reveal answer✓ I found this
3. 3

   Hint: Drag (or swipe) upwards starting on the banner, then starting on the products.

   Page does not scroll when the swipe starts on the banner

   The carousel sets touch-action: none and swallows the pointer, so vertical gestures that start on it are lost. On a phone, the banner can fill much of the screen, so the page feels “stuck”. Expected: the carousel only handles horizontal swipes (touch-action: pan-y); vertical swipes scroll the page.

   Reveal answer✓ I found this
4. 4

   Hint: Watch the counter in the corner and the VoiceOver text while slides change.

   The counter always says 1 / 5

   The counter and the slides’ accessible names were set once and never updated: every slide is “1 of 5”, visually and for screen readers. Expected: the counter, the active dot and the announcement all match the slide shown.

   Reveal answer✓ I found this
5. 5

   Hint: Wait for the last slide (Gift cards) and watch the next change.

   Looping rewinds visibly through all slides

   Instead of moving on to slide 1, the strip slides backwards through slides 4, 3, 2 to 1 in one fast sweep. It looks like a glitch. Expected: a seamless loop (continue to the right) or a carousel with clear ends.

   Reveal answer✓ I found this
6. 6

   Hint: Read the Network log right after starting the app.

   All banner images are downloaded at full size on launch

   All five banners are requested immediately at 2400×1350 px, about 12.4 MB before the user has seen slide 2, on a 290 px wide phone screen. Expected: load the first slide in a phone-sized version (around 100–200 KB), and lazy-load the others just before they are shown.

   Reveal answer✓ I found this

How to test it

Checklist

Carousel test checklist

0 of 15 checked

Copy

• Autoplay (if any) has a visible Pause button and pauses on hover and keyboard focus
• Autoplay stops after the user swipes, taps an arrow or a dot
• Each slide stays long enough to read (at least 5 seconds)
• With Reduce Motion / prefers-reduced-motion on, nothing moves by itself and animations are minimal
• Swipe works on touch, arrows (or drag) work with a mouse, and a short wobbly tap is not a swipe
• Vertical swipes starting on the carousel scroll the page
• Each dot opens its own slide; tap areas are big enough and do not overlap
• Counter, active dot and screen reader announcement match the slide after every kind of navigation
• Loop is seamless, or the ends are clear (arrows disabled, swipe bounces back)
• Dragging a slide does not trigger its link; tapping a slide opens the right link
• Only the first slide loads up front (not lazy); others load just in time; images are sized for the screen
• Important content is not cropped at any breakpoint; images are sharp on high-density screens
• Keyboard: Pause, arrows and dots reachable with Tab; links on hidden slides are not focusable
• Screen reader: region named (e.g. "Featured offers, carousel"), slides announced "2 of 5", controls labeled
• Works after rotation, resizing the window, and coming back from another screen

Example test cases

Tools

• Real devices: gestures, scrolling conflicts and tap accuracy only show up with a real finger. See Gestures.
• DevTools › Network (filter Img) with network throttlingNetwork throttlingDeliberately slowing the connection to test how an app behaves on poor networks.Open in glossary →: count the requests and MB on first load. Lighthouse flags oversized images and a lazy-loaded LCP image. See Performance basics.
• DevTools › Rendering: emulate prefers-reduced-motion. Elements: inspect the dot buttons to see their real size.
• Responsive mode (Responsive design testing): check the crop at 360, 768 and 1440 px wide.
• Screen readers: VoiceOver (iOS/macOS), TalkBack (Android), NVDA (Windows).

Accessibility

• Name and role. The container is a region announced as a carousel with a label. Each slide is a group announced as “slide” with its position (“2 of 5”).
  Dev note

  For example <section aria-roledescription="carousel" aria-label="Featured offers">. This follows the WAI-ARIA Authoring Practices carousel pattern (ARIAARIAHTML attributes that tell assistive technology what custom elements are and what state they're in.Open in glossary →).
• Pause control first. The Pause/Play button should come first in the focus orderFocus orderThe order in which the Tab key moves through interactive elements.Open in glossary →, so keyboard and screen reader users can stop the motion before anything else.
• Don’t move focus unexpectedly. Changing slides (by autoplay or a click) must not move keyboard focus. Links and buttons on hidden slides must not be focusable.
  Dev note

  Use inert or tabindex="-1" plus aria-hidden.
• Announce changes only when the user caused them. Otherwise screen readers interrupt the user every few seconds.
  Dev note

  Use aria-live="polite" on the slides while autoplay is off, and aria-live="off" while it runs.
• Labeled controls. “Previous slide”, “Next slide”, “Go to slide 3” (or the slide’s name), “Stop automatic slide show”.
• Alt textAlt textA text description of an image that screen readers read aloud.Open in glossary → for every meaningful image, including text that is baked into a banner (“Summer sale: up to 40% off sandals”).
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: arrows and dots at least 44×44 pt / 48×48 dp. Swiping is optional: every slide must be reachable with a tap or a key.
• Contrast: text over images needs 4.5:1 against the actual pixels behind it, on every slide. A gradient overlay usually helps.

Mobile vs web

iOSAndroidWeb

• No ready-made “carousel” control.
  Dev note

  Apps build it with a paging UICollectionView / UIScrollView, or SwiftUI TabView with .tabViewStyle(.page), plus UIPageControl for the dots.
• Test the edge swipe: on a carousel at the left edge, swiping right may trigger the system Back gesture instead.
• Test Reduce Motion, VoiceOver (can you reach and hear every slide? Is the position announced?) and Dynamic Type on slide text.

• Material 3 has a Carousel component (multi-browse, uncontained, hero and full-screen layouts).
  Dev note

  Older apps use ViewPager2 or Compose HorizontalPager.
• Test inside nested scrolling containers (a carousel inside a vertical list inside tabs): which one wins the gesture?
• Test Remove animations, TalkBack, rotation (does it keep the slide?) and process death.

• Quality of web carousels varies a lot, so check the accessibility basics yourself.
  Dev note

  Usually a JavaScript library (Swiper, Splide, Slick, Embla…) or CSS scroll snap.
• Test with mouse only (no horizontal wheel): can you reach every slide? With keyboard only: Tab order, visible focus, no hidden focus traps.
• Check image loading in DevTools, the crop at several widths, and prefers-reduced-motion.
• Check layout shift: does content below jump when the carousel’s images load?

Check your understanding

Quick quiz

0/6 answered · 0 correct

1. 1.A hero carousel changes slide every 4 seconds and has no way to stop it. Which WCAG criterion does it fail?

   A1.4.3 Contrast (Minimum)B2.2.2 Pause, Stop, HideC2.4.7 Focus VisibleDNone, it is just a design choice

2. 2.You swipe up on a banner carousel to scroll the page, but nothing moves. What is this?

   ACorrect: the carousel owns all gesturesBA gesture conflict bug: vertical swipes should scroll the pageCA performance problemDA screen reader issue

3. 3.Which slide image should NOT be lazy-loaded?

   AThe first, visible slideBThe last slideCAll slides should be lazy-loaded

4. 4.Which carousel type do users engage with the most?

   AAuto-rotating hero banners with unrelated promosBA product photo gallery they swipe themselvesCA carousel with 10 slides changing every 2 seconds

5. 5.Tapping the first dot of a carousel opens slide 2. What should you check first?

   AThe server responseBThe dot buttons’ real tap areas (size and position)CThe image sizesDThe autoplay interval

6. 6.The user has turned on Reduce Motion. What should an autoplaying carousel do?

   APlay faster so it finishes soonerBNot autoplay, and keep animations minimalCHide itself completely

Key takeaways

• Carousels work when users are in control (product galleries, content rows). Auto-rotating hero banners get little engagement, so don’t hide important info on later slides.
• Autoplay needs a visible Pause button, must pause on hover and focus, stop after interaction, and stay off with reduced motion (WCAG 2.2.2).
• A carousel owns only horizontal gestures: vertical swipes must still scroll the page.
• Counter, dots and slide must always match, for eyes and for screen readers (“2 of 5”).
• Test dot tap areas, loop behavior and ends, with a real finger.
• Images: lazy-load later slides, never the first; serve sized images; check the crop at every width.