How to Add a Before-and-After Image Slider to Your Zibster Website Using Juxtapose
Want to wow your visitors by showing off transformations on your website? With Juxtapose, a free tool from Knight Lab, you can easily create an interactive before-and-after image slider. This guide walks you through uploading your images to Zibster, creating your slider in Juxtapose, and embedding it on your website.
⚠️ Heads up: Zibster is not affiliated with Knight Lab. For questions about the Juxtapose tool, please visit their support page.
STEP ONE
LOG INTO YOUR ZIBSTER ACCOUNT
Log in at Zibster.com and click on FILES from the left-hand menu.
STEP TWO
OPEN THE DOCUMENTS SECTION
Click on DOCUMENTS in the top-center menu. You’ll upload your before-and-after images here.
STEP THREE
UPLOAD YOUR IMAGES
Upload both your "before" and "after" images into the Documents section.
✅ Pro Tip: Make sure the two images are exactly the same size. Juxtapose works best when image dimensions match perfectly.
Once uploaded, copy the Link URL for each image — you'll need them for Juxtapose.
STEP FIVE
ADD YOUR IMAGE LINKS
- Paste the before image URL into the LEFT IMAGE URL field.
- Paste the after image URL into the RIGHT IMAGE URL field.
You can also add labels, credits, or customize your slider’s appearance if you'd like.
STEP SIX
CLICK PUBLISH
Scroll down the Juxtapose page and click PUBLISH to generate your slider.
STEP SEVEN
COPY THE EMBED CODE
Once published, Juxtapose will provide an embed code. Highlight and copy it.
STEP EIGHT
ADD YOUR SLIDER TO YOUR ZIBSTER WEBSITE
-
In your Zibster Website Builder, go to the page where you want to display the slider.
-
Add a Custom HTML block to the page.
-
Paste the embed code into the HTML field on the right.
-
Click Save Changes to add the slider to your website.
