Website Slider: Should You Use One? Conversion, Speed, Accessibility

Should you use a website slider on your homepage?

A website slider is a component that shows several images or messages in the same space, one after another. On most business sites, one clear hero image with one message works better than an auto-rotating homepage slider. A website slider makes sense mainly for galleries and other ordered content, and only when visitors control it.

This is not a matter of taste, because the W3C accessibility guidance, Nielsen Norman Group research and web.dev documentation all point the same way. Motion distracts, visitors often miss everything after the first slide, and a badly built website slider slows the page. A hero image is the large image and headline at the top of a page. So here is a short decision order first.

1. First, write down every message in the slider and pick the one that moves visitors to act. In most businesses, that is a single message.
2. Next, check whether the content is a true collection, such as product, project or property photos. If it is, consider a carousel that visitors control.
3. Turn off autoplay. If you cannot, add a clear pause button.
4. Make sure the first slide image loads fast, because it is usually the LCP element (the largest piece of content to render on screen).
5. Finally, track which slide visitors click and decide with your own data.

Below, we explain the reasoning for each step with official and primary sources. First, let us define what a slider is.

What is a website slider, and which types exist?

The W3C Web Accessibility Initiative defines a carousel as a component that shows a collection of items one at a time. In its carousel tutorial, W3C notes that people also call it a slideshow or a slider. Typical uses include scrolling news headlines, featured articles on home pages and image galleries.

In practice, you will meet five types:

• Auto-rotating homepage slider: large images that change on their own in the first screen.
• User-controlled carousel: slides that change only with arrows, dots or a swipe.
• Product or project gallery: similar images shown in order.
• Testimonial rotator: short customer quotes shown one by one.
• Horizontal card row: category or service cards that scroll sideways on mobile.

Most problems in this article come from the first type, because the page starts the motion, not the visitor. On the other hand, the other types carry far less risk when you build them well. So when we say "website slider," we mostly mean the auto-rotating homepage version.

Why do businesses want a website slider in the first place?

Sliders are common for three ordinary reasons. First, many themes and site builders ship a ready-made slider section in their homepage templates. Second, motion looks impressive at first glance. Third, and most important, everyone wants their own message on the first screen.

The Nielsen Norman Group carousel usability article says this openly. A carousel lets several pieces of content share the same prime space, and it can calm the argument over whose content deserves it. In other words, a slider is often a fix for internal politics, not a design decision.

In our web design services, we settle this argument before design starts. First, we write down the one action a visitor should take on the first screen. Then we choose one message, and the other messages move into their own sections below.

What does the research say about auto-rotating sliders?

Nielsen Norman Group (NN/g) ran a usability study on auto-forwarding panels, which behave like an auto-rotating website slider. A participant looked for washing machine deals on an appliance brand's homepage. The offer sat in the biggest box on the page, but that box showed a new panel every five seconds. She never found the offer and finally gave up. She said she did not have time to read it and that it changed too quickly.

NN/g lists several reasons why auto-forwarding hurts:

• Moving elements reduce accessibility, especially for users with motor difficulties who struggle to click before the content disappears.
• Low-literacy users may not have enough time to read the content.
• People who read in a second language read more slowly, so a brief panel may not register.
• Panels take turns, so people notice each one less often. In the NN/g example, the discount was visible only 20% of the time.
• Because the element moves, people assume it is an ad and ignore it.

The NN/g fix is clear: show a new panel only when users ask for it, and otherwise keep the content still. W3C reaches a similar conclusion. It notes that people dispute carousels on usability grounds, because their content can be hard to discover.

Why do visitors miss the message in a slider?

According to the NN/g carousel article, people often scroll right past carousels, on large and small screens alike. As a result, they miss the content in every frame except the first. The article admits that some eyetracking research and web metrics show attention and clicks for certain carousels. Still, its main warning stands: people frequently overlook carousels.

The second problem is perception. A designer sees a carousel as a collection of images, while a visitor often sees only the one image on screen. If that one image misleads, NN/g says the visitor may form the wrong idea about your organization.

Example calculation: if each slide stays on screen for 5 seconds, a visitor must wait 15 seconds to reach the fourth slide (3 × 5). If they scroll earlier, the last message never appears.

That is why NN/g advises putting any important hero or carousel information somewhere else in the interface too. Then a visitor who misses the slide still finds the information.

How does a website slider affect accessibility?

Auto-rotation is the core accessibility issue. W3C puts it first in its carousel tutorial: users must be able to pause carousel movement, because it can be too fast or distracting and makes text hard to read. The tutorial also names two groups explicitly: people who find movement distracting and people who need more time to read.

The rule rests on success criterion 2.2.2, "Pause, Stop, Hide," in WCAG (Web Content Accessibility Guidelines) 2.2, at level A. According to the W3C explanation of 2.2.2, moving content needs a pause, stop or hide mechanism when it starts automatically, lasts more than five seconds and appears alongside other content. The same document lists auto-advancing presentations and messages as examples of auto-updating content.

Pausing only while focus rests on the carousel is not enough. The explanation says an animation that stops only while the user holds focus does not count as a mechanism to pause. So W3C recommends both: a visible play and stop button, plus an automatic pause when the mouse or keyboard focus reaches the carousel.

According to W3C, an accessible carousel does four things:

• Users can pause and restart the movement.
• Every function works by keyboard, including moving between slides.
• Screen reader users hear when the slide changes.
• Keyboard focus moves in a sensible, understandable order.

What do the WCAG criteria require from a slider?

The table summarizes the WCAG 2.2 criteria that touch sliders directly, with the thresholds from the official text. The letters A and AA show the conformance level. Also, a CSS pixel is a logical pixel unit that does not depend on screen density.

In WCAG, large text means at least 18 point, or 14 point bold. If you put text over an image, test it with our free color contrast checker. For the bigger picture, read our guide to web accessibility and WCAG standards.

How does a website slider hurt page speed and LCP?

LCP (Largest Contentful Paint) measures when the largest image or text block in view finishes rendering. With a homepage slider, that largest element is usually the first slide image. According to web.dev, a good LCP is 2.5 seconds or less, and you should measure it at the 75th percentile of page loads. Our article on what LCP is and how to optimize it goes deeper.

The web.dev guide to optimizing LCP gives four warnings that apply directly to sliders:

• The browser must find the LCP image in the first HTML response. If JavaScript adds the image, or a library stores its address in a field it fills later, the browser discovers it late.
• A CSS background image is not discoverable while the browser scans the HTML. You would need to preload it.
• Never lazy-load the LCP image. web.dev states this as an explicit warning.
• Give high fetch priority to only one or two images. You can lower the priority of carousel slides that are not visible at startup.

In practice, the setup looks like this: put the first slide image in the HTML as a real image and let the browser fetch it at once, while later slides wait their turn. Also, web.dev notes that large JavaScript files can delay rendering even after the image has downloaded, and slider libraries add to that weight. For sizes and file weight, see our website image sizes guide.

Do sliders affect SEO, and how should you add the images?

For SEO (search engine optimization), what matters is not whether a slider exists but how you build it. The Google Search Central image documentation says Google finds images in the src attribute of an image element, and it does not index CSS images. Some slider setups add slides as CSS background images. In that case, the slide images may never show up in image search.

Alt text matters too. The same page explains that Google uses alt text together with computer vision and the page content to understand an image. So if a slide image carries a message, let the alt text describe that message. Do not stuff it with keywords.

Heading structure is another common trouble spot. Giving every slide its own H1 (main heading tag) muddies the main heading of the page. In the W3C example structure, the carousel sits in its own labeled region and the slide headings are lower-level headings. We cover the debate in our post on whether a page can have multiple H1 tags. Our rule here is simple: keep the heading that defines the page outside the slider, single and fixed.

Why are sliders more fragile on mobile?

On a phone, the screen is small, tap targets are tight and pages are short. So a slider breaks more easily. NN/g advises against auto-forwarding on mobile for two reasons: it slows the page, and people scroll fast, so by the time a slide changes they usually look further down the page.

Dot indicators are a weak cue on mobile, because NN/g says people often do not notice them. Buttons also need to be large. WCAG 2.5.8 asks for pointer targets of at least 24 by 24 CSS pixels, while the AAA criterion 2.5.5 asks for 44 by 44. NN/g also suggests keeping navigation controls inside the carousel, not below it.

Swiping feels natural, but it should not be the only way. WCAG 2.5.1 asks for a simple tap alternative next to path-based gestures such as swiping. For example, the W3C explanation describes a news carousel that supports swiping and also offers previous and next buttons.

Check how your page looks on a phone with our free mobile friendly test. The tool inspects the viewport tag (the setting that fits the page to the phone screen), font size and tap targets.

Does a website slider improve conversions?

We cannot give you a universal percentage, and you should distrust unsourced numbers. The primary sources report usability findings: NN/g says people often overlook carousels. The same article admits that eyetracking research and web metrics show attention and clicks for some carousels.

A conversion (a visitor completing a goal such as a form, a call or a purchase) depends on factors on your own site: whether the offer sits on the first slide, how long visitors stay on the first screen, how clear the message is and how fast the page loads. So watch for three possible harms:

• If your offer is not on the first slide, many visitors may never see it.
• Motion pulls attention away, and NN/g notes that a static hero image may distract less than a rotating element.
• If the first image loads late, the call to action also shows up late.

In short, the evidence is not a one-sided claim that sliders cut conversions. It shows where the risk sits. So you should measure the effect on your own site, and the method is below.

How do you choose between a slider, a single hero image, a carousel and a grid?

The table compares four options on five criteria. The ratings interpret the W3C, WCAG, NN/g and web.dev findings above, so treat them as guidance, not a verdict for your site.

The takeaway: for the homepage, a single hero image is the most balanced option for most businesses. A user-controlled carousel and a grid come second. The auto-rotating website slider carries the most risk.

What should you use instead of a website slider?

For most businesses, the answer is one hero section on the first screen. A hero is the large headline, image and action button at the top of the homepage. NN/g says a designer who must choose a single image may pick a stronger one, and visitors can focus on that one image.

A strong hero has five parts:

• A one-sentence, concrete headline that says what you do and for whom.
• A short supporting line under the headline.
• One primary action button, such as request a quote or call.
• A real image that shows your offer.
• A small trust signal, such as a real reference or certificate.

Do not turn your other messages into slides. Instead, give each one its own section below the first screen, so visitors read it in place without motion. We covered how to build the first screen in our guide to above the fold design, the whole page flow in our homepage design article and the action button in our call to action guide.

The same principle works for ad traffic. Our landing page design solution rests on one message and one goal. Applying that discipline to the homepage simplifies the first screen too.

A background video is not an automatic fix either. The WCAG 2.2.2 explanation lists motion pictures and animations as moving content, so a video that starts on its own needs a pause control. Also, web.dev counts a video's poster image as an LCP candidate.

When does a website slider still make sense?

A slider is not wrong everywhere. A carousel works well when the content is a real ordered collection and the visitor drives the movement. W3C itself lists image galleries among typical uses. These cases fit:

• Product photos: different angles of one product that visitors browse at their own pace.
• Project and before-and-after galleries: useful when you want to show work in order.
• Venue and property photos: visitors want several frames before they decide.
• Step-by-step explanations: setup or process steps shown in sequence.
• Horizontal card rows on mobile: category or service cards side by side.

The condition stays the same: the visitor starts the movement. For carousels that do not auto-forward, NN/g gives two tips. Use navigation links and icons, and cut off part of the next image so people sense that more content follows.

In what order should you check your current slider?

Start with the most common cause: the first slide. Many visitors see only that one. In the field, we sometimes find the real campaign on the third slide while the first slide carries only a brand name and slogan. Then check these points in order:

1. First slide: Does it explain your offer on its own? If not, the problem starts here.
2. Motion: Is autoplay on, and is there a stop button?
3. Keyboard: Can you reach the arrows and slide links with the Tab key, use them with Enter and see the focus outline?
4. Phone: Can you read the text, tap the buttons easily and use something other than swiping?
5. Speed: Does the first slide image arrive with the page, or later?
6. Data: Which slide did visitors click recently, and does any slide get no clicks?

If the first three points show two or more problems, switching to a single hero image is often a simpler fix than repairing the website slider.

How do you set timing and slide count if you cannot turn autoplay off?

Management or partners may insist on an auto-rotating website slider. Then reduce the risk. First, add a stop button to meet WCAG 2.2.2. Next, pause the movement when the mouse or keyboard focus reaches the carousel, as W3C recommends.

NN/g advises against auto-forwarding in two cases: when you cannot be sure the timing will let most people read, and when the content looks like an ad. For timing there is no rule, only a guideline. NN/g uses three words per second as a reading guideline. Example calculation: a 15-word slide needs 15 ÷ 3 = 5 seconds just for reading. Understanding the image takes extra time, and slower readers need even more.

For slide count, NN/g suggests five frames or fewer, because users rarely engage with more. Also, keep cycling instead of stopping at the last frame, and never auto-forward on mobile. These are guidelines, not rules, so test them with your own content.

What belongs on your checklist if you keep a slider?

Before you publish, tick every item below. That way you remove most common mistakes up front.

• The first slide carries your offer and your action button on its own.
• Autoplay is off. If it is on, a clear stop button exists and the movement pauses when focus reaches the carousel.
• The slider has five slides or fewer, and important information also appears elsewhere on the page.
• Previous and next buttons and the slide indicator sit inside the carousel and are clear and large enough.
• You can reach every control by keyboard, and you can see the focus outline.
• Next to swiping, tap-friendly previous and next buttons exist.
• Text lives in the HTML, not inside the image, and text over an image meets the contrast criteria.
• Slide images are real images in the HTML and carry meaningful alt text.
• You do not lazy-load the first image, and later slides get a lower priority.
• Images have the right dimensions and a small file size.
• No slide has its own H1, and the one main heading of the page sits outside the slider.
• You tag each slide link separately and review the results regularly.

How do you measure what your slider actually does?

Measurement has four steps in concept. Tool menus change often, so we do not name buttons; find the setting in the tool's help pages.

1. Give every slide link its own tag, such as the slide position and message name. Your analytics tool can then split clicks by slide.
2. Use heatmaps and session recordings to see whether visitors scroll past the slider or tap the arrows. Our article on heatmaps and session recordings explains how these tools work.
3. Next, compare two versions (an A/B test): the version with the slider and the version with one hero image. Use the same period, the same traffic source and the same goal.
4. Check whether the difference is just chance with our A/B test calculator. If traffic is low, do not draw firm conclusions from a short test.

Example calculation: suppose the slider links get 200 clicks in a month, and your tags show 170 came from the first slide. The first slide then takes 85% of the clicks. These numbers are illustrative, only to show the logic. Such a split suggests the other slides serve as decoration, but do not decide from one month of data, and account for seasonality.

How do you move from a slider to a single hero image, step by step?

This is an example scenario, not a real client. Imagine a small furniture workshop with four slides on its homepage: a campaign, a showroom, a catalog and references.

1. Write down the four messages and pick the one action you want visitors to take on the first screen, such as asking for a quote.
2. Move the message that serves that action into the hero: one headline, one supporting line, one button.
3. Place the other three messages below the first screen as three separate sections or cards.
4. Choose one strong photo and write the text in the HTML, not inside the image.
5. Before you remove old slide links, make sure visitors can still reach their target pages another way.
6. Test the new homepage on a phone and with a keyboard, and measure its speed before launch.
7. After a few weeks, compare click and conversion data with the earlier period.

The best time to drop a website slider is when you move the site to a new platform, because you rebuild the design anyway. If you are leaving a builder such as Wix, see our guide to migrating from Wix and transferring your domain. However, do not launch the migration and the design change on the same day, because it becomes hard to tell what caused any problem.

How can we help if you want to rebuild your homepage with us?

The website slider decision is only a small part of a website project. Talha Aslan and team design, build, migrate and manage your website. Also, we handle the homepage message, visual hierarchy, speed, accessibility and measurement together.

If you want us to review your current homepage or build a new site from scratch, request a quote for business website design. We do not promise prices, packages or delivery times up front. Instead, we prepare a quote based on your scope. Include your site address, your goal and the one action you want on the first screen to speed things up.