Carousels on mobile websites: keep, fix or remove?

Key takeaways

A carousel on a mobile website is usually a way of avoiding a decision about what matters most. On a phone it loads several large images, rotates messages before they are read and puts small controls at the edge of the screen. Most homepage sliders should be replaced with one clear message. Some carousels, lower on the page, are fine.

• People often scroll past carousels without interacting, on any screen size.
• Nielsen Norman Group advises five frames or fewer and no auto-rotation on mobile.
• A hero slider loads several large images, which slows the first screen.
• Moving content that runs for more than 5 seconds needs a way to pause it (WCAG).

What is the problem with carousels on mobile?

A carousel, or slider, is a component that shows several panels of content in the same space, one at a time, changing automatically or when the visitor swipes. The problem on mobile is that it concentrates three weaknesses in the most valuable part of the page: weight, movement and fiddly controls.

Weight, because each slide typically carries a large image, so the phone downloads three or five where one would do. Movement, because a message that rotates away after four seconds is often gone before it is read. Controls, because the arrows and dots are small and sit near the screen edge, where swipes can trigger the browser's back gesture instead.

• Why mobile-friendly web design is essential for UK businesses

What does the research say?

Nielsen Norman Group's carousel guidance notes that people often scroll past carousels and recommends five frames or fewer, since visitors are unlikely to engage with more. It advises against auto-forwarding on mobile devices, because it slows performance and because users have usually scrolled on before the change happens.

The practical reading is that only the first slide reliably gets seen. Whatever is on slides two to five is, for most mobile visitors, not on the website. If that content matters, it needs its own place on the page.

How does a slider affect mobile speed?

A hero slider is frequently the largest thing on the page and so determines its Largest Contentful Paint, the Core Web Vitals measure of how quickly the main content appears. Google's threshold for a good result is 2.5 seconds. A slider that loads a script, a stylesheet and several full-width images before showing anything makes that hard to reach on mobile data.

Sliders can also cause layout shift when the component resizes after its images load, which is another Core Web Vital. Replacing a five-slide hero with one optimised image is among the most reliable speed improvements available on a small business site.

• Core Web Vitals for business websites
• Why is your mobile PageSpeed score lower than desktop?

When does a carousel earn its place?

A carousel earns its place when the visitor chooses to browse a set of similar things and each item is optional. Product photos on a product page, a gallery of completed projects, a row of testimonials or a set of related articles all suit a swipeable row, because seeing one item is useful and seeing more is a bonus.

The difference from a hero slider is control and consequence. The visitor swipes when they want to. Nothing rotates on its own. And if they see only the first item, nothing essential has been missed.

• Good use: product images, project galleries, testimonials, related items.
• Poor use: the main headline, the offer, the only route to key services.
• Good behaviour: swipe to advance, part of the next item visible as a cue.
• Poor behaviour: auto-rotation, tiny dots, arrows at the screen edge.

• Website images that help visitors decide

How do you fix a carousel you want to keep?

Make it manual, light and obvious. Turn off auto-rotation on mobile. Limit it to five items. Load the first image immediately and the rest only when needed. Show the edge of the next item so people can see there is more. Give controls a touch area of about 48 pixels, and make swiping work.

• Switch off auto-play on mobile, or provide a visible pause button.
• Keep to five frames or fewer.
• Load only the first image up front and lazy-load the others.
• Reserve the component's height so the page does not jump.
• Let a sliver of the next item show at the screen edge.
• Give each slide its own text alternative for screen readers.

• Tap target size: how big should buttons be on mobile?
• Optimise website images for speed and search

What should replace a homepage slider?

Replace it with one static first screen: a headline that says what you do and for whom, a single supporting image, and one primary button. Move the messages that were on the other slides into sections further down the page, each with its own heading.

The trade-off is internal, not commercial. Sliders exist because several people each wanted their message at the top. Choosing one means a conversation about priorities. That conversation is the real work, and the site is better for it.

• What belongs above the fold on a business website

What does this look like in practice?

A pattern we see on homepages built from templates: a five-slide hero, each slide a wide photograph with a different slogan, rotating every four seconds. On a phone the photographs are cropped to a strip, the slogans wrap onto four lines, and the first screen takes several seconds to settle on mobile data.

Replacing it with one image, one headline and a Call button usually cuts the page weight substantially and puts the business's main message in front of every visitor. Global Bridge Labs (GBL) treats a hero slider as the first candidate for removal in a mobile speed review.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Next step

Open your homepage on a phone and count to five. Whatever message is on screen at that moment is the only one most visitors will see. Decide whether it is the right one.