How to Add a Before and After Slider to Any Website

A before and after slider puts two photos in the same frame and lets the visitor drag a handle across them. It is the clearest way to show a renovation, a skin treatment or a photo edit, because the change appears exactly where the handle crosses the image.

You don’t need a plugin or any code of your own to add one. The method below works on almost every website builder: you make the slider once, then paste a short embed code into your page.

The short version

1. Open the slider tool and drop in your “before” and “after” images.
2. Pick the view you want visitors to see first (slider, side by side, toggle or difference) and press Publish.
3. Copy the Embed (iframe) code from the share panel.
4. Paste it into an HTML or embed block on your site.

That’s it. The slider is responsive, works with touch on phones, and loads only when a visitor scrolls to it (loading="lazy"), so it won’t slow the top of your page.

The embed code has two parts: the <iframe> that shows the slider, and a one-line caption with a link to the full-size comparison. Keep the caption if you can. It tells visitors where they can zoom in, and it gives search engines a normal link to follow.

Before you start: prepare the images

A slider can only be as convincing as the photos in it. Two things matter most:

• Same size and framing. If one photo is wider or shot from further away, the handle reveals a jump instead of a change. Crop both images to the same aspect ratio before uploading.
• Same light and angle. Our guide on taking before and after photos covers this in detail.

Images are stored exactly as you upload them, so there is no need to save them at a lower quality first. JPG, PNG, WebP, GIF and AVIF all work.

WordPress (block editor)

1. Edit the page or post and click + to add a block.
2. Search for Custom HTML and add it.
3. Paste the embed code.
4. Click Preview in the block toolbar to check it, then update the page.

If you use a page builder such as Elementor, use its HTML widget instead. Some security plugins strip <iframe> tags from posts written by users without the unfiltered_html capability. If the slider disappears after saving, check that you are logged in as an administrator or editor.

Shopify

Product pages and landing pages are where sliders earn their keep: a shopper can see what the product does without reading a word.

1. In the Shopify admin, go to Online Store → Themes and click Customize.
2. Open the template where you want the slider, for example a product page.
3. Click Add section (or Add block) and choose Custom Liquid.
4. Paste the embed code and click Save.

For a single product description, you can also open the product, click the Show HTML button (<>) in the description editor and paste the code there.

Wix

1. In the Editor, click Add Elements → Embed Code → Embed HTML.
2. Choose Code, paste the embed code and click Update.
3. Drag the corners of the HTML element so it has roughly the same shape as your images.

Wix shows embedded HTML inside its own frame, so give the element enough height. If you see a scrollbar, make the element taller.

Squarespace

1. Edit the page, click an insert point and add a Code block.
2. Paste the embed code and make sure the display mode is set to HTML.
3. Save and preview the page.

Squarespace limits code blocks on some plans. If the block is not available to you, put the plain link to the comparison in a Button or Text block instead.

Webflow

1. Drag an Embed element (under Components) onto the canvas.
2. Paste the embed code and click Save & Close.
3. Publish the site. Embeds don’t run inside the Designer, so check the result on the published page.

Plain HTML, React or any other site

Paste the code wherever the slider should appear. The iframe sets width:100% and an aspect-ratio that matches your images, so it fills its container and keeps the right shape on every screen size.

To control the size yourself, wrap it:

<div style="max-width: 900px; margin: 0 auto">
  <!-- paste the embed code here -->
</div>

Add ?toolbar=0 to the end of the iframe src URL to hide the toolbar (view mode, zoom and image buttons) and show only the slider.

Iframe embed vs. a slider plugin

	Embed code	Slider plugin or script
Setup	Paste once	Install, configure, update
Image hosting	Included, not recompressed	Your media library
Zoom, difference view, multiple images	Included	Depends on the plugin
View statistics	Yes, with a free account	Rarely
Works on any builder	Yes	Only where the plugin exists
Styling	Fixed, clean look	Fully customisable

A plugin makes sense if you need the slider to match your theme pixel for pixel. For everyone else, an embed is faster to set up and keeps working when you change themes.

See who is looking at it

Every view of an embedded slider is counted, and with a free account you can see how many people opened it, how many dragged or zoomed, and which websites it is embedded on. That last list is handy when a client or a forum shares your comparison without telling you.

If the slider sits on a business page, Pro removes the small watermark and the credit badge from the embed, so it looks like part of your own site.

Troubleshooting

The slider is too tall or too short. The aspect-ratio in the embed code comes from your first image. If your page needs a different shape, change the value, for example aspect-ratio:4/3.

Nothing appears after saving. Your builder or a security plugin probably removed the <iframe>. Try the builder’s dedicated HTML or embed block, not the text editor.

The images look different sizes. The viewer scales every image to the frame of the first one. Crop them to the same size before uploading for a clean comparison.

I need it on Instagram or TikTok. Social apps can’t run embeds. Download the animated sweep video instead; see how to share a before and after on Instagram and TikTok.

Ready to try it? Make your slider. It takes about a minute.