Before & After Image Slider

New

Show the difference between two photos with a draggable divider. Use it for renovations, retouching, redesigns or treatment results. Paste two image URLs, set the labels and handle, and copy the code. The slider is plain HTML, CSS and a few lines of JavaScript, with no library and nothing loaded from xorbin.com.

Embed code

Everything happens in your browser. The code is self-contained: it doesn't load anything from xorbin.com and doesn't track your visitors. The share link keeps your settings in the part of the address after #, which is never sent to a server.

How to add the before and after slider to your website

Paste the addresses of your before and after images, and describe each one for screen readers.
Choose the split direction, start position, shape and handle. The preview updates as you go.
Click Copy code.
Paste it into your page as HTML, where the slider should appear.

WordPress: add a Custom HTML block and paste the code.
Shopify: add a Custom Liquid section in the theme editor.
Wix: use Embed code → Embed HTML.
Squarespace: add a Code block.
Webflow: drag in an Embed element.
Plain HTML: paste the code where the widget should appear.

To come back to your design later, click Copy share link and save the link. Opening it restores every setting.

Features

Drag or hover

Visitors drag the handle, or simply move the mouse across the image in hover mode. On phones it works by touch, and the page still scrolls normally.

Keyboard accessible

The handle is a real slider for screen readers. It moves with the arrow keys, Page Up and Page Down, and Home and End jump to either side.

Side by side or top and bottom

Split the images left and right or top and bottom, starting at the position you choose.

Fits your layout

Keep the images' own shape or set 16:9, 4:3, 3:2, square or portrait, with rounded corners and a maximum width.

Tips for a good comparison

Take both photos from the same spot, with the same zoom and framing, so details line up.
Export both images at the same size. If they differ, pick a fixed Shape so both are cropped the same way.
Start the divider where the most important change is, not always in the middle.
Keep the labels short, such as "Before" and "After" or "2019" and "2025".

Images and privacy

The builder runs in your browser and doesn't upload your files. The images load from the addresses you enter, both in the preview and on your website, so use images you host or have permission to show. Prefer HTTPS addresses: an HTTPS page blocks images from plain HTTP.

A share link holds your settings, including the image addresses, so anyone who has it can read them. Don't put private or signed image URLs in a link you share.

Frequently asked questions

Do both images need the same size?

They should have the same shape (aspect ratio) so they line up. If they don't match exactly, set a fixed shape and both images are cropped the same way to fill it.

Where are the images stored?

Wherever you host them, such as your media library or a CDN. The widget only shows the addresses you paste. The sample images are placeholders.

Does it work on touch screens?

Yes. Dragging works by touch, and the page can still scroll normally around the slider.

Can I use it more than once on a page?

Yes. Paste the code for each pair of images. Every slider runs on its own.

Can I remove the Xorbin credit?

Yes. Turn off the credit link under Credit before you copy the code. It changes nothing else.

Logo marquee widget — Show a scrolling strip of client or partner logos.
Countdown timer widget — Count down to a sale, launch or event on your website.
Analog clock widget — Add a classic clock face with hands to your website.
Digital clock widget — Add a seven-segment LED-style clock to your website.
Star rating badge widget — Show your average rating and review count.