How to Add a Before and After Slider to Your Website

A before and after slider is one of the few widgets that is genuinely persuasive rather than decorative. It shows a change instead of describing it, and it lets the visitor control the reveal, which is far more convincing than two pictures side by side.

It is also one of the easiest to do badly, and almost every problem happens before the widget is involved. The images are shot from different positions, or in different light, or cropped to different shapes, and the slider faithfully displays that mess.

So this guide spends most of its time on the two photographs, then on the settings that matter, then on the honesty question that anyone using these seriously has to answer.

What a Before and After Slider Is Actually For

It answers one question: what changed. It is the right tool when the change is visual, happened in one place, and is the thing you are selling.

The obvious fits are the ones you would expect: renovation and building work, cleaning and restoration, landscaping, photo retouching, dentistry and cosmetic treatment, hairdressing, car detailing, and website redesigns. What they have in common is that the value is visible, and that a paragraph describing it is far weaker than showing it.

Where it does not fit is a change that is not visual, a change spread across many places, or a change so subtle that the viewer has to be told what to look at. If you find yourself writing a caption explaining where to look, the slider is not the right format and a set of annotated stills probably is.

Everything Depends on the Pair of Images

The widget is simple. The photography is not, and it is where the credibility comes from.

The rule is that exactly one thing should change between the two frames. Everything else stays fixed:

• Position. Same spot, same height, same distance. Mark the floor if you can, or note a landmark that lines up with the edge of the frame.
• Angle. A few degrees of rotation is enough to make the two images refuse to line up.
• Lens and zoom. A different focal length changes the perspective, not just the size, and no amount of cropping fixes it.
• Light. Same time of day, same weather, same lamps on or off. This is the one people forget, and it is the one that quietly does the persuading in a dishonest comparison.
• Framing. Same crop, same aspect ratio, same dimensions in pixels.

The practical trick for anything you can plan is to photograph the before, keep the camera position noted, and photograph the after from the same place. For work that is already finished, look for a fixed reference in the original shot, a doorway, a window frame, a kerb, and rebuild the position from that.

Alignment and Cropping

Even careful shooting leaves small differences, so a little correction is normal and expected.

Work in this order. Rotate first, using a strong horizontal or vertical in the scene as your guide. Then scale so that a fixed feature is the same size in both frames. Then crop both to identical dimensions, keeping that fixed feature in the same place in each. Export at the same size.

A good check before you upload: flick between the two images at full size. Anything that jumps is something the slider will expose as the handle passes over it. Fix the jump now rather than discovering it on the live page.

If the two images simply cannot be aligned, because the before was taken by someone else on a different day with a phone in portrait, be honest about the format. Two labelled images side by side is a weaker presentation and an accurate one. A slider built from mismatched frames looks like a trick even when nothing is being hidden.

Vertical or Horizontal Divider

Most sliders offer both and the choice follows the subject rather than taste.

A vertical divider moving left and right suits scenes with a strong horizontal spread: a room, a garden, a building, a wide landscape. It is the default for a reason and it is what most visitors expect, which counts for something.

A horizontal divider moving up and down suits tall subjects and anything where the change runs vertically: a wall, a door, a portrait, a full page screenshot of a website.

The test is which direction the eye already travels across the image. Cutting across that direction makes the reveal feel awkward, and the visitor will usually drag once and give up.

Where the Divider Should Start

A small setting with a real effect, and the default of dead centre is often the wrong choice.

Starting at fifty percent shows half of each image, which is balanced and tells the visitor immediately that there are two images. Starting further to one side shows more of the before, which sets up the change and makes the reveal feel bigger.

Whatever you choose, the handle must look draggable. This is the single most common failure in the wild: a slider sitting at fifty percent with a thin line and no visible grip, which reads as a badly cropped image rather than an interactive element. An obvious handle, an arrow on each side, and a small hint of movement on load all fix it.

Labels, and Why They Matter More Than You Think

Label both sides. It sounds unnecessary and it is not.

Without labels the visitor has to infer which side is which, and they infer it from which one looks better, which is exactly the assumption you do not want them making unprompted. It also breaks down completely for changes where "better" is subjective, such as a redesign or a colour change.

Keep the labels short, put them in the top corners where the divider will not run over them, and make sure they stay legible against both images. If one image is dark and the other is bright, a label with no background will disappear on one side of the drag.

Touch Screens and the Scroll Problem

This is where sliders most often fail, and it is worth testing on a real phone rather than a narrow browser window.

The conflict is simple. A vertical drag on a phone means scroll. A slider with a horizontal divider is safe, because dragging sideways is unambiguous. A slider with a horizontal divider that moves up and down competes directly with scrolling, and a visitor who tries to move it will scroll the page instead, then assume the slider is broken.

Three things make touch work properly. Let a tap anywhere on the image jump the divider to that point, which avoids dragging altogether. Make the handle large enough for a thumb. And check that a failed drag does not leave the page scrolled somewhere unexpected.

If your subject demands a vertical movement and your audience is mostly on phones, consider showing the two images stacked on small screens instead. A format that works beats one that is technically more impressive.

Accessibility

A slider is an interactive control, so it carries the same obligations as any other.

The handle should be reachable and movable with a keyboard, which usually means arrow keys once it has focus. Both images need alternative text describing what they show, not "before" and "after", which tells a screen reader user nothing about the actual content. And the labels need enough contrast to be read against both images.

There is also a plain content point. Anyone who cannot use the slider should still get the information, so a sentence nearby describing the change is worth writing. It helps search engines for the same reason it helps people: the comparison itself is invisible to both.

Weight, and Why Sliders Get Heavy

A before and after slider loads two full size images at once, so it costs roughly twice what a single photograph costs. On a page with several comparisons that adds up quickly.

Export both images at the size the layout actually uses rather than straight from the camera, compress them, and use a modern image format if your platform supports one. If the slider sits below the fold, load it only when the visitor scrolls to it.

The one thing not to do is reduce quality to save weight. The entire point is that the viewer can see a difference, and a soft, over compressed pair undermines the comparison you are making. Resize aggressively, compress sensibly, and keep the detail. There is more on this in our guide to keeping widgets from slowing a page down.

Where to Put It on the Page

A slider is proof, so it belongs next to the claim it proves.

On a service page, put it directly under the description of that service, not in a gallery at the bottom. On a case study, put it near the top, because it is the fastest summary of the whole story. On a home page, one strong comparison outperforms a row of small ones, which nobody drags.

Alongside other social proof, a slider does something reviews cannot: it shows the outcome rather than reporting an opinion about it. The two work well together, and the pairing of a comparison with a quote from the customer it belongs to is stronger than either alone.

The Honesty Question

Worth addressing directly, because the format invites it.

There is a line between presenting work well and manufacturing a difference. Correcting rotation, matching exposure between two frames shot in the same light, and cropping both to the same frame are presentation. Shooting the before in poor light, using a wider lens to make a room look cramped, adding clutter, or retouching one side only are manufacturing.

The practical reason to stay on the right side of it, beyond the obvious, is that prospective customers compare your slider with the result they get. A comparison that overstates the change sets an expectation the work cannot meet, and the complaint arrives later with your own image attached to it.

Some fields also regulate this directly, particularly medical and cosmetic treatment, where rules on results, consent and claims vary by country. If that is your field, check what applies before publishing rather than after.

Adding One to Your Site

1. Prepare the pair. Align, crop to identical dimensions, export at the size the layout needs. This is most of the work and the widget cannot fix it later.

2. Choose the direction of the divider based on the subject, not the default.

3. Set the starting position and the handle style, making sure it reads as draggable.

4. Write both labels and both alt texts. Two minutes, and the piece everyone skips.

5. Paste the embed code into your page, or into a custom HTML or code block on a site builder. Use the code block rather than the rich text editor, which will escape the snippet and show it as text.

6. Test on a phone. Drag it, tap it, and scroll past it. Most problems appear here and nowhere else.

The before and after slider widget covers these settings without any code, and works on the common site builders where installing a plugin is not an option.

Consent and the Right to Use the Images

Easy to overlook and expensive to get wrong, particularly for anyone photographing people or private property.

If a person is identifiable in the frame, you need their permission to publish, and permission to take the photograph is not the same as permission to use it in marketing. Get it in writing, be specific about where it will appear, and say whether it may be used on social media as well as the site, because that is the question that comes up later.

If the work is inside somebody's home or business, the owner has a say even when nobody is in shot. A kitchen is recognisable to the people who live near it, and clients are not always comfortable having their house used as a portfolio piece.

There is also the question of who owns the photograph. If a contractor, an agency or a photographer took the before shot, the right to publish it may not be yours by default. This matters most for older work, where the before image often came from whoever was on site that day.

Keep the permissions filed with the images rather than in an email thread. Two years later the person who arranged it may have left, and an unattributed photo of a stranger's house is not something you want to have to defend.

Choosing Which Comparison to Show

Most people pick their most dramatic transformation. That is usually the wrong choice.

The most extreme example sets an expectation the average job cannot meet, and the visitor comparing your slider with their own situation may conclude that their problem is not big enough to be worth calling about. A representative comparison does more work than a spectacular one, because it lets people see themselves in it.

Two more selection rules worth applying. Choose a subject the visitor is likely to have: the common room, the common repair, the common request, not the once in a decade project. And choose a pair where the change is obvious at a glance on a phone screen, because that is where it will be seen.

If you have a genuinely spectacular example, use it, but pair it with an ordinary one. The combination reads as a range of work rather than a single lucky result.

When Two Images Side by Side Are Better

The slider is not always the right format, and knowing when to drop it saves a lot of fiddling.

Use two static images instead when the before and after cannot be aligned, when the change is spread across a scene rather than concentrated in one place, or when the viewer needs to see both states at once to understand the difference. A slider shows one state at a time by design, which is a disadvantage when the comparison is about detail rather than transformation.

Static images are also the safer choice on a page that must work everywhere with no interaction: an email, a printed PDF, a page for an audience on old devices. The slider degrades badly in those contexts, usually to a single image with a stray line down it.

The deciding question is whether the reveal adds anything. If the drag itself makes the change land harder, use the slider. If it just hides half the information, use both images.

Common Mistakes

• Two images that are not the same size. The cause of nearly every visual glitch people blame on the widget.
• Different lighting between the frames. Reads as dishonest even when it was accidental.
• No visible handle. Visitors do not drag what does not look draggable, so the slider is just a cropped image.
• Unlabelled sides. Leaves the visitor to guess, and they guess by which side looks better.
• A vertical drag on a mobile heavy page. Competes with scrolling and loses.
• A row of small sliders. One large comparison gets used. Six small ones get ignored.
• No text describing the change. Invisible to screen readers and to search engines alike.

A Short Test Before You Publish

Six checks, and between them they catch nearly everything that goes wrong with these in the wild.

• Drag it slowly from edge to edge. Anything that jumps, shifts or changes size is an alignment problem in the images, not a fault in the widget.
• Look at it on a real phone, not a narrow desktop window. Drag it, tap it, and scroll past it.
• Read the labels against both images, including at the extremes where one image fills the frame.
• Tab to it with the keyboard and try to move the divider with the arrow keys.
• Reload on a slow connection and watch whether the layout jumps when the images arrive.
• Show it to somebody who has not seen the work. If they do not immediately realise they can drag it, the handle is not obvious enough.

None of this takes more than a few minutes, and it is the difference between a slider that persuades and one that visitors scroll straight past.

Getting It Right

Almost everything that makes a before and after slider work happens before you touch a widget. Two frames from the same position in the same light, cropped identically, labelled clearly, placed next to the claim they support.

Do that and the slider does something no paragraph of copy can: it hands the visitor the evidence and lets them check it themselves. That is why it converts, and it is also why it is worth the discipline of shooting the pair properly.

One habit makes all of this easier over time. Whenever you finish a job, photograph the result from the same position as the before shot while you are still on site, and file the pair together with the client permission. Reconstructing a camera angle weeks later is the single biggest reason good comparisons never get published, and it takes two minutes to avoid.

A comparison is one way to show rather than tell. A public number is another, and it comes with its own trade-off: a visitor counter is persuasive when the figure is strong and quietly damaging when it is not.