How to Add a Before and After Slider to Your Website

1. Put both images online

The embed shows images that are already published on the web. It does not upload or store your files. Prepare a matching pair — same crop, same dimensions — and upload both to the site where the slider will appear: the WordPress Media Library, Shopify Files, your Squarespace or Wix media manager, or any image host you control.

Copy each image’s direct address. It should start with https:// and open the image by itself in a new browser tab. A link to a gallery page, a share page, or a private cloud folder will not work. Avoid addresses that contain access tokens, because anyone can read the embed code.

• Use the same crop and pixel dimensions for both images.
• Resize to the largest size the slider will be shown at — 1600 pixels wide is plenty for most pages.
• Compress the files; the visitor downloads both.
• Check each address in a private browser window to confirm it is public.

2. Generate the embed code

Open the comparison tool, choose the mode and direction you want visitors to start with — Split, Reveal, or Crossfade, horizontal or vertical — then open Embed a comparison on your website. Paste the before and after image addresses and choose Generate embed code. Copy the code.

The code is a single iframe. It scales to the width of its container and keeps its proportions with the CSS aspect-ratio property. The viewer runs on beforeafterly.com, loads your two images directly from their hosts, and contains no advertising or analytics.

<iframe src="https://www.beforeafterly.com/embed?before=…&after=…&mode=split&vertical=false"
  title="Before and after image comparison" width="800" height="520"
  style="width:100%;aspect-ratio:20/13;height:auto;border:0" loading="lazy"
  referrerpolicy="no-referrer"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Open the comparison tool ↗

WordPress

In the block editor, add a Custom HTML block where the slider should appear and paste the code. Use Preview to check it, then update the page. In the Classic editor, switch to the Text tab before pasting. Page builders such as Elementor and Divi have their own HTML or Code module that accepts the same code.

Some hosted WordPress plans and security plugins remove iframes from posts. If the slider disappears after saving, check your plan’s rules for custom HTML or ask your administrator to allow iframes from www.beforeafterly.com.

Shopify

For a product or page description, open the rich text editor, choose Show HTML (the <> button), and paste the code where the slider should appear. For a section on a theme page, open the theme editor, add a Custom Liquid section, and paste the code there. Upload the images in Content → Files and copy their links to use as the image addresses.

Squarespace, Wix, and Webflow

Squarespace: add a Code block, paste the code, and make sure the block is set to HTML. Wix: add an Embed Code element, choose the HTML or custom code option, paste the code, then drag the element’s frame to the size you want, because Wix shows embeds inside a fixed-size box. Webflow: add a Code Embed element and paste the code.

Website builders change their menus and plan features over time, and some limit custom code to certain plans. If you cannot find the option, search your builder’s help centre for “embed HTML” or “iframe”.

Plain HTML, React, and other sites

Paste the iframe into your page’s HTML wherever the slider belongs. In React or another framework that uses JSX, convert the style attribute to an object and use referrerPolicy instead of referrerpolicy. Content-security policies that restrict frames need to allow https://www.beforeafterly.com in frame-src.

3. Make it fit portrait photos and small screens

The default code uses a landscape shape, with room underneath for the slider control. The viewer fills the frame with your images and crops the edges if their shape differs. For portrait photos, change aspect-ratio:20/13 to a taller ratio such as 4/5 or 3/4, and the width and height attributes to match.

To limit the width on large screens, wrap the iframe in a container with a maximum width, for example a div with style="max-width:720px;margin:auto". Visitors can drag the divider, tap, or use the arrow keys after focusing the slider.

Help search engines and every visitor

Search engines index the content of an iframe as part of the embedded page rather than as part of yours. Write a short caption next to the slider that explains what changed, and consider also placing the after photo on the page as a normal image with descriptive alt text. That gives the page indexable text and an image that can appear in image search, and it helps visitors who cannot use the slider.

Prefer a static image? Download a labelled PNG from the comparison tool, or make a side-by-side image with the photo maker, and upload it like any other photo.

Make a side-by-side image ↗