Before-and-After Sliders: Show Your Work and Win More Enquiries

If your work is visual, the most convincing thing on your website is often a simple pair of photos: what the job looked like when you arrived, and what it looked like when you left. A before‑and‑after slider places those two photos on top of each other and lets visitors drag a handle across the image to reveal one or the other. It’s interactive, it’s easy to understand and it lets the work speak for itself.

The screenshot above is from the Azza’s Auto Spa website I built, where a slider under the heading “Experience the transformation” invites visitors to drag across a car to see it go from dirty to clean. In this article I’ll explain why this kind of proof helps, which businesses it suits and how to do it properly, so it builds trust without slowing your site down.

Why Before‑and‑After Proof Builds Trust

Most people choosing a valeter, cleaner, gardener or builder are trying to answer one question: “Will they do a good job on mine?” Phrases like “high‑quality finish” and “attention to detail” are easy to write and hard to believe. A real before‑and‑after shows the standard of your work in a way words can’t, and gives visitors something specific to judge you on.

A slider also invites people to take part. Dragging the handle to reveal the result is a small, satisfying action that encourages visitors to look closely at the detail (the shine on a paint finish, a cleared garden or a freshly plastered wall) rather than scrolling straight past a static gallery.

Which Businesses It Suits

A before‑and‑after slider works best when the change is visible in a single photo. Good fits include:

• Car valeting and detailing: dirty to clean, swirl marks to a corrected finish, stained to fresh upholstery
• Cleaning services: end‑of‑tenancy cleans, carpets and upholstery, ovens, and pressure‑washed driveways and patios
• Landscaping and gardening: overgrown to tidy, new lawns, patios, fencing and planting
• Building and renovation: extensions, kitchens, bathrooms, loft conversions and repairs
• Painting and decorating: rooms, exteriors, wallpapering and woodwork
• Other visual trades: roofing, guttering, flooring, tiling and restoration

It’s less useful where the result isn’t visible, such as most electrical or plumbing work hidden behind walls. There, reviews, accreditations and a clear explanation of how you work will usually do more for you.

Good Practice for Before‑and‑After Photos

• Use the same angle, distance and framing. Stand in the same spot for both shots so the two photos line up as the handle moves. If the frames don’t match, the comparison looks confusing or, worse, staged.
• Keep the lighting consistent. Take both photos at a similar time of day and avoid switching from shade to bright sunlight. A big change in lighting can make a result look better than it really is, and customers notice.
• Keep it honest. Crop and straighten if you need to, but don’t retouch the result, add a filter to only one photo or use someone else’s images. Your before‑and‑afters are a promise of what a customer can expect, and misleading images can fall foul of advertising rules as well as damaging trust.
• Ask the customer’s permission. Get the customer’s agreement before you publish photos of their car, home or garden, and keep a record of it; a quick written yes by message or email is sensible.
• Protect privacy. Before publishing, check for number plates, faces, house numbers, street names and anything else that could identify the customer or where they live. Blur or crop them out unless the customer is happy for them to be shown.
• Compress your images. A slider loads two images, so file size matters twice over. Resize photos to the size they’ll actually be displayed, serve them in a modern format such as WebP, and lazy‑load sliders further down the page so they don’t slow the first view.

Make It Accessible and Mobile‑Friendly

An interactive feature should work for everyone, not just people using a mouse. When I build a slider, I check that:

• The handle can be moved with the keyboard (for example with the arrow keys) and shows a visible focus outline
• It works smoothly with a finger on phones and tablets, without getting in the way of scrolling the page
• Both images have alt text describing what they show, such as “Before: patio covered in moss and weeds” and “After: the same patio cleaned and re‑sanded”
• Nothing important is hidden inside the slider; prices, guarantees and calls to action sit in normal text around it
• There’s a sensible fallback, so if the script doesn’t load, visitors still see the before and after photos (for example side by side)
• A short label tells people what to do, such as “Drag to compare”

Where to Put Your Slider

• Near your quote button. A strong before‑and‑after close to your main call to action means visitors see the proof at the moment they’re deciding whether to get in touch.
• On each service page. Match the example to the service: a patio clean on your pressure‑washing page, a finished kitchen on your kitchen‑fitting page. That’s more relevant than one generic example on the homepage.
• In your gallery or recent work page. A handful of sliders, each with a short caption saying what the job involved and roughly where it was (“Abingdon” rather than a street address), makes a strong portfolio.

One or two good sliders on a page is usually enough. A long stack of them adds weight to the page and dilutes the impact of your best work.

Pair It with Reviews and a Clear Call to Action

A before‑and‑after shows what you can do; a review shows what it was like to work with you. Put a genuine customer review next to the relevant slider (ideally from the same job, with the customer’s permission) and follow both with one clear next step, such as “Get a free quote” or “Book a call”. Make that button easy to find on a phone, and keep your phone number and service area close by. If you’re building up your reviews, my guide to local SEO for Oxfordshire service businesses covers how to ask for them within Google’s rules.

Quick Checklist

• Same angle, framing and lighting for both photos
• Honest, unedited results, published with the customer’s permission
• Number plates, faces and addresses blurred or cropped where needed
• Images resized, compressed and served as WebP
• Works with a keyboard and on touch screens, with alt text for both images
• Key information and calls to action outside the slider
• Placed near your quote button and on the relevant service page

How I Can Help

I build bespoke website widgets and content like before‑and‑after sliders, either as part of a new website project or as an add‑on to your existing site. I’ll make sure it’s fast, accessible and works properly on phones, and I’ll include it in your fixed quote so you know the cost before any work starts. For more ideas on turning visitors into enquiries, read Why Great Web Design Drives Conversions.