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.
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/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 can carry several 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 0 to 100. 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, text, and accent 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 save. 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.
Embed guides
Add the Before/After Slider to your platform.
Add a Before/After Slider to a Canva website
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before/After Slider to a Notion page
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before/After Slider to a Shopify store
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before/After Slider to a WordPress site
Step-by-step embed instructions, platform limits, and FAQ.
Add a Before/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 several pairs to the same widget and they stack down the page, each with its own title and caption, which covers a portfolio of jobs. There is no three-way comparison and no carousel.
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 save. 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.
Related starters