Renovation and landscaping
Use this starter as a fast base, then edit text, colors, images, links, and behavior.
Cleaning and detailing
Use this starter as a fast base, then edit text, colors, images, links, and behavior.
Retouching and restoration
Use this starter as a fast base, then edit text, colors, images, links, and behavior.
A before and after can be three different things. A still image with both photos side by side is for an Instagram post, and a template or a photo app makes it. A clip of one photo wiping into the other is for Reels and TikTok, and a video app makes it. A slider that visitors drag on your own website is the third kind, and it is what this widget is.
Drag the divider on the preview above: that is the whole mechanic, and it is the part every tool gets right. What decides whether your slider looks like one change or two unrelated photos is the pair you feed it. Both images fill the same 16:9 frame and are cropped to fill it, so shoot the after from where you shot the before. A phone propped on the same windowsill twice beats a handheld pair every time.
The photos are the content, and on a slider they change more often than anything else on the page. A landscaper finishes a job every fortnight, a clinic adds a case every week, a retoucher swaps the portfolio piece every month. This widget is hosted, so replacing the pair happens in Fugte and every page carrying the embed shows the new comparison. The code you pasted into your site is never touched again.
Features
What the Before and After Slider widget can do.
Drag, click, or arrow keys
The divider follows a range control laid invisibly over the image, so a visitor can drag it, click a spot to jump the divider there, or move it with the arrow keys once it has focus.
More than one comparison
Each pair is a block, so one widget carries up to six sliders stacked down the page, each with its own title and caption underneath. One slider compares two photos, not three.
Set where the divider starts
The starting position is a slider from 10 to 90. Leave it centred for a balanced first look, or push it toward the before so more of the after shows on load. It applies to every pair in the widget.
Labels, captions, and your colors
Before and after labels sit on the image and are shared by every pair. Title and caption belong to each pair. Background, card, text, and accent colors, the corner rounding, a shadow, and separate heading and body fonts are settings, and the accent paints the divider and its handle.
Swap the photos, keep the embed
Replace the before and after images in Fugte and publish again. Every page the widget is embedded on serves the new pair. Nothing gets re-generated, re-pasted, or re-published on your site.
Free to start
The free plan includes unlimited widgets and unlimited views, with a small Fugte badge. Paid plans remove the badge everywhere, or $9.99 once removes it from a single widget.
Embed guides
Add the Before and After Slider to your platform.
Add a Before and After Slider to a Canva website
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before and After Slider to a Notion page
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before and After Slider to a Shopify store
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before and After Slider to a WordPress site
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before and After Slider to a Webflow site
Step-by-step embed instructions, platform limits, and FAQ.
FAQ
Common questions.
How do I add a before and after slider to my website?
Start from this widget in Fugte, upload the two photos, set the labels, and publish. Paste the hosted link or iframe snippet into your page. Any platform that accepts links or embeds works, and there are step-by-step guides for each one on this page.
Can I put a before and after slider on a Canva site?
Yes. Canva has no code block, but its Embed element accepts a link, and Canva sites render static in-page embeds, which is exactly what this is. It is worth knowing what does not work there: floating buttons, sticky bars, and popups. A slider sitting in the page flow is unaffected.
Can I compare more than two images?
One slider compares two. You can add up to six pairs to the same widget and they stack down the page, each with its own title and caption, which covers a portfolio of jobs. For a progress series, chain the pairs: week 1 against week 6, then week 6 against week 12, so each slider shows one step of the change. There is no three-way comparison and no carousel.
Does the slider work on phones?
Yes. On a phone, visitors drag the divider with a finger, and the photos keep their 16:9 frame at any width. The divider moves only when someone drags it, never on its own as the page scrolls, so a visitor who does not drag sees the starting position. Set it where the change is easiest to see, usually toward the before, so more of the after shows.
Should I paste slider code into my site instead of embedding one?
It is a trade-off. Code pasted into your page depends on nobody else, and it never changes unless you edit it on every page it sits on. A hosted slider changes everywhere from one edit, and it depends on Fugte's service: if that cannot be reached, the slider does not appear in its box, while the rest of your page loads as normal. For a portfolio that gets a new job every few weeks, the one edit usually matters more.
Can the slider be vertical?
No. The divider moves left and right only, so plan for a horizontal wipe. For a change that reads better top to bottom, such as a full-height room, a horizontal wipe across a landscape crop still works, but the vertical version is not a setting.
How do I change the photos after the slider is live?
Open the widget in Fugte, replace the before image and the after image, and publish again. Every page the widget is embedded on shows the new pair. You do not regenerate anything and you do not touch the embed code, which is the difference between a hosted widget and a snippet with the images baked into it.
What size should my before and after photos be?
The frame is 16:9 and both photos are cropped to fill it, so a landscape shot fares better than a portrait one, which loses its top and bottom. What matters more is matching the two: same camera position, same distance, same framing. Two photos with different proportions get cropped by different amounts, and that mismatch is what makes a pair read as two unrelated pictures.
Should I use a free before and after image maker instead?
It depends on where the comparison lives. If you want a picture to post on Instagram, a maker that hands you a file is the right tool. If the comparison sits on your site and gets replaced every time a job finishes, a downloaded image means redoing it and re-uploading it everywhere it appears. A hosted widget is edited once. Fugte makes the hosted kind, so weigh that accordingly.
Can I use it for client or patient photos?
Yes, and get consent in writing before client, patient, or customer photos go on a public page. That is on you rather than on the widget: nothing here checks permissions, and the images are served to anyone who can open the page.
Is the before and after slider free?
Yes. The free plan includes unlimited widgets and unlimited views, with a small Fugte badge on the widget. Paid plans remove the badge everywhere, or $9.99 once removes it from a single widget.
Related starters