How To Create A Before & After Image Comparison Slider

How to Add a Before-and-After Image Slider to Your PhotoBiz Website Using Juxtapose

Want to show off your work with a before-and-after slider? You can do just that with the help of Juxtapose, a free tool from Knight Lab. In this guide, we’ll walk you through how to upload your images to PhotoBiz, create your slider in Juxtapose, and embed it onto your website.

⚠️ Important Note:

PhotoBiz is not affiliated with Knight Lab. If you need help with the Juxtapose tool, they recommend using the support form here.

STEP ONE

LOG INTO YOUR PHOTOBIZ ACCOUNT

Go to PhotoBiz.com, log in, and click FILES in the left-hand menu.

STEP TWO

GO TO YOUR DOCUMENTS SECTION

Click on DOCUMENTS from the top center menu. This is where you’ll upload the images for your slider.

STEP THREE

UPLOAD YOUR IMAGES

Upload your “before” and “after” images here.

🔁 Tip: Make sure both images are the same size. Juxtapose works best when the dimensions of the images match exactly.

Once uploaded, copy the Link URL for each image — you’ll need these in the next steps.

STEP FOUR

OPEN JUXTAPOSE

In a new browser tab, go to: https://juxtapose.knightlab.com

This website will use the images you've uploaded to your Files section to generate the before-and-after slider.

STEP FIVE

ENTER YOUR IMAGE LINKS

Paste the URL of your before image into the LEFT IMAGE URL field.

Then, paste the URL of your after image into the RIGHT IMAGE URL field.

You can also add optional titles or labels to each image if you like.

STEP SIX

PUBLISH YOUR SLIDER

Scroll down and click the PUBLISH button underneath the preview window.

STEP SEVEN

COPY THE EMBED CODE

Once your slider is published, an embed code will appear. Highlight and copy this entire code.

STEP EIGHT

ADD THE SLIDER TO YOUR PHOTOBIZ WEBSITE

In your PhotoBiz Website Builder, go to the page where you want the slider to appear.
Add an HTML Block.
Click on the HTML block and choose Advanced from the top-right corner.
Paste the embed code into the text field that appears.
Click Save Changes.

That’s it! You now have a working before-and-after slider on your PhotoBiz website — a great way to showcase your transformations with an interactive visual experience.

Previous Post Next Post

How To Use HTML Blocks

May 22, 2025

How To Embed VidFlow Galleries or Videos on PhotoBiz

May 15, 2025

How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?

June 3, 2024

How To Use Image Blocks

November 21, 2025