How to add a Before After Image Slider on Squarespace 7.0

**Now available for Squarespace 7.1 **

We came across this blog post written by Anthony Kramer a few years ago, who had modified a twentytwenty plugin developed by Zurb.com to be used within the Squarespace platform.

The plugin uses the Stacked Image Gallery Block within Squarespace for the before and after effect. Below are instructions on how you can install it for use in Squarespace 7.0.

Table of Contents

• Why add a Before & After image slider

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why add a Before & After image slider?

• Engages visitors with an interactive visual

• Builds credibility and trust by showcasing real results

• Enhances the professionalism of your presentation

Step-by-Step Instructions

STEP 1: DOWNLOAD CODE

Download the following files.

STEP 2: INSTALL THE CODE

To upload the files, click on the add link option, see below

Then click on the gear image, see below.

Select the file option. Then, click on the ‘UPLOAD FILE’ link to upload file.

STEP 3: INJECT CODE

Go to Settings > Advanced > Code Injection to add the following code to the header and footer of your website.

Into the Header

<!--Before and After Image Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/s/jquery-213min.js"><\/script>')</script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jqueryimageslidergallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/imageslidergallery.css" type="text/css" media="screen" />

<!-- End of Before and After Image Slider  -->

Into the Footer

<!-- Before and After  Image Slider -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery();
});
</script>
<!-- End of Before and After  Image Slider -->

STEP 4: CUSTOMIZE CODE (OPTIONAL)

To remove the overlay add the following code by going to Design > Custom CSS .

/* Image Slider Overlay */
.imageslidergallery-overlay {
visibility: hidden !important;
}

If you want images the stacked vertically instead of horizontally, add then replace the footer code with the one below:

<!-- Before and After  Image Slider  -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery({
orientation: 'vertical'
});
});
</script>
<!-- End of Before and After  Image Slider -->

The default starting position of the slider is "0.5", however, you can change the value between "0" and "1".  With "0" being totally left and "1" totally right.

If you wanted the line to start say 30% from the left side, you would use "0.3"

<!-- Before and After  Image Slider  -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery({
default_offset_pct: 0.3
});
});
</script>
<!-- End of Before and After  Image Slider  -->

Below is an example code where the images is stacked vertically and the slider starts 30% from the left.

<!-- Before and After  Image Slider  -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery({
orientation: 'vertical',
default_offset_pct: 0.3
});
});
</script>
<!-- End of Before and After  Image Slider  -->

Troubleshooting.

If you are having issues with the plugin.

1. Ensure that Ajax Loading turned off. To do this, simply go to "Design > Site" Styles and turn Ajax off.

2. For mobile devices, make sure that JavaScript is enabled on the mobile device.

3. Other codes on your site interfering with the Image Slider. To sort this take out the codes and test again, then slowly add the code back to work out which section of the code is interfering with the Slider.

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.

Key Takeaways

• Enhances Visual Storytelling - A Before & After slider is a powerful way to visually demonstrate transformations or improvements—ideal for designers, fitness professionals, photographers, and more.

• Interactive User Experience - The slider invites visitors to engage with your content directly by dragging between images, making the experience more memorable and immersive.

• Builds Credibility - Showing real, tangible results side by side boosts trust and helps potential clients or customers see the value of your work or product.

• Can Be Reused Across the Site - Once set up, you can easily reuse the slider on other pages or blog posts—just copy and paste the code block or plugin embed.

• Minimal Impact on Site Speed - When properly implemented (with compressed images and lightweight code), the slider should not significantly slow down your site.

• Great for Portfolios and Case Studies - If you offer services where transformation is key (e.g., web design, hair styling, interior decor), this slider can elevate your portfolio presentation.

FAQs

Can I add more than one before & after slider on the same page?

Yes! If using a plugin, check that it supports multiple sliders. For custom code, you may need to duplicate and slightly modify the code block for each instance.

Is it mobile responsive?

Most modern plugins and code solutions are fully responsive, but always test on various screen sizes before publishing.

Can I use this in a blog post or gallery page?

Yes. Simply use a Code Block in your blog or gallery section to insert the slider, or use plugins that support Grid Gallery sections.

Will this slow down my site?

Not significantly. However, use compressed images and clean code or reputable plugins to maintain site speed.

---

---

Conclusion

Adding a Before & After image slider to your Squarespace site is a great way to engage users, highlight your work, and increase conversion potential. Whether you’re comfortable with code or prefer a plugin, the process is straightforward and the results are impactful.