How to Add a Before-and-After Image Slider to Webflow in 2026

Why would I use a before-and-after slider on a Webflow site?

A before-and-after slider shows change in a way words cannot. The visitor drags a handle and watches the old version turn into the new one. For redesigns, retouching, renovations, or any visual service, it proves your work in one gesture. It is the most honest portfolio piece you can build, because the proof is right there.

I reach for this when a flat pair of images would not land. Two photos side by side make people compare with their eyes. A slider makes them compare with their hands, and that small bit of interaction makes the difference feel real.

This guide builds a slider that is fast, works on touch and keyboard, and stays sharp on every screen. You will use Webflow's Designer for the layout and a small amount of code for the motion.

What is a before-and-after image slider?

It is two stacked images with a draggable divider between them. The "after" image sits on top of the "before" image. A handle lets the visitor reveal more or less of the top image by sliding left or right. The part you have not revealed simply shows the image underneath.

The trick is that both images occupy the same space. They are layered, not placed next to each other. The slider only changes how much of the top image is visible, which creates the wipe effect as you drag across.

Under the hood, most versions use a range input for the handle and a clip on the top image. When the range value changes, the clip changes, and the reveal follows your finger or cursor. Simple parts, satisfying result.

What do I need to build one in Webflow?

You need two matching images and the ability to add a little custom code. The images must be the same size and the same crop, or the effect falls apart. Beyond that, you need a wrapper element, the two images, a handle, and a short script to tie the handle to the reveal.

I prepare the images first. They should share the exact dimensions and framing, so the only thing that changes as you slide is the content, not the alignment. A tripod or a locked crop makes this easy for photo work.

For the code, Webflow's HTML Embed or a page level code block is enough. You are not installing a heavy plugin. You are adding a handful of lines that listen to a slider and update a clip value.

How do I structure the slider in Webflow?

Stack both images inside one positioned wrapper. Create a wrapper div and set it to position relative. Place the "before" image as the base layer. Place the "after" image on top with position absolute so it sits directly over the first. Then add a range input as the handle and an ID you can target.

I give the wrapper a fixed aspect ratio so the layout never jumps while the images load. A reserved space protects your Cumulative Layout Shift, which Google wants at 0.1 or less, and it keeps the slider from collapsing before the images arrive.

This layered structure is the same thinking behind clean case study galleries. If you build a portfolio, you might also like my approach in using CSS grid lanes for Webflow case study galleries, which keeps visual work tidy.

How do I make the slider handle move?

Connect the range input to a clip on the top image. Write a short script that listens for the range value, then sets a clip path or width on the "after" image to match. When the value is 50, you reveal half. When it is 80, you reveal more. The image follows the slider instantly.

I use a clip path inset for this because it is smooth and well supported in modern browsers. The script reads the slider's value as a percentage and feeds that percentage into the clip. One small function handles the whole interaction.

Keep the script light, since responsiveness is part of the appeal. The work is just reading a number and setting a style, so it stays well within Interaction to Next Paint, which Google added as a Core Web Vital and wants at 200 milliseconds or less.

How do I keep both images perfectly aligned?

Force both images to the same size and the same object fit. Set both to fill the wrapper with object fit cover, so they crop identically. If one image stretches differently from the other, the reveal will shift and the illusion breaks. Matching dimensions in the source files prevents most of this.

I double check alignment by sliding slowly across the middle. If a line in the photo, like a horizon or an edge, jumps as I cross, the images are not aligned. Fixing the source crop is better than fighting it with code.

Webflow helps here by generating responsive variants for uploaded images, with up to seven sizes for large originals. Because both images go through the same pipeline, they scale together, which keeps your alignment intact across screen sizes.

How do I make the slider work on touch and keyboard?

Lean on the range input, because it already handles both. A native range input responds to touch dragging and to arrow keys out of the box. That gives you mobile support and keyboard support without extra work, which is a big accessibility win for very little effort.

I style the range input so the handle is easy to grab, with a target large enough for a thumb. I also add an accessible label so screen reader users know what the control does. The Web Content Accessibility Guidelines expect interactive controls to be operable by keyboard, and the range input meets that by default.

Testing on a real phone is non negotiable. I drag with a thumb, not a mouse, and confirm the reveal tracks smoothly. Touch is where most visitors will meet your slider, so it has to feel natural there first.

Will the slider slow down my page?

It will not, as long as you optimize the two images. The script is tiny, so the real weight is the pictures. Two large photos can hurt your Largest Contentful Paint, which Google wants at 2.5 seconds or less, so compression and modern formats matter here more than the code.

I export both images as WebP or AVIF and keep their dimensions sensible. There is no reason to ship a 4000 pixel file for a slider that displays at 800 pixels. Right sizing the source is the single biggest speed lever.

I also lazy load the slider if it sits far down the page, so it does not compete with the hero. I explain how that choice interacts with LCP in my post on lazy loading images and the LCP fix, which applies directly here.

What design mistakes ruin a before-and-after slider?

The worst mistake is mismatched images that do not line up. If the before and after were shot from slightly different angles, the wipe looks like a glitch instead of a transformation. Aligned source images are the foundation, and no code can save a bad pair.

The second mistake is a hidden or tiny handle. If visitors cannot tell the image is draggable, they will never try. I add a clear handle with a left and right hint, so the invitation to slide is obvious at a glance.

The third mistake is using it for work that does not show change. A slider is wasted on two similar images. Save it for genuine before and after pairs, the same way you would save a press kit page for genuine brand assets, as I cover in my guide to building a Webflow press kit page.

How do I know my slider is ready to ship?

Test the reveal, the alignment, and the speed on real devices. Drag it on a phone and a desktop, confirm a horizon line stays steady across the middle, and run a quick speed check to make sure the images did not bloat the page. When all three pass, the slider is ready.

A good before and after slider does one job extremely well, which is proving your work without a single sentence of marketing. Built this way, it is light, accessible, and convincing.

If you want a hand building one for your portfolio or a client project, let's connect. I am happy to walk through the structure and the small script that makes it feel smooth.