before and after image slider_1e.gif
before and after image slider_1e.gif

Before And After Image Slider

$25.00

VIEW DEMO

The Before And After Image Slider allows you to showcase transformations, comparisons, or product improvements with a sleek interactive slider. Visitors can drag the handle to reveal “before” and “after” images, instantly highlighting changes or differences in a visually compelling way. It’s an intuitive way to engage users while keeping your design clean and modern.

This slider works seamlessly on both desktop and mobile devices, offering a smooth, real-time reveal effect that draws attention naturally. Each interaction creates an engaging visual experience, allowing users to control what they see and explore the contrast at their own pace. The result is dynamic, interactive, and highly impactful.

Who is this plugin for?

This plugin is perfect for businesses, agencies, creative studios, e-commerce brands, nonprofits, and individuals who want to highlight transformations, product comparisons, or design improvements in a visually appealing way. It’s ideal for Squarespace users who want to demonstrate value, showcase before/after results, or create interactive storytelling while keeping the layout minimal and user-friendly.

$25 Single Website ‍ ‍ $55 Unlimited Websites

VIEW DEMO

The Before And After Image Slider allows you to showcase transformations, comparisons, or product improvements with a sleek interactive slider. Visitors can drag the handle to reveal “before” and “after” images, instantly highlighting changes or differences in a visually compelling way. It’s an intuitive way to engage users while keeping your design clean and modern.

This slider works seamlessly on both desktop and mobile devices, offering a smooth, real-time reveal effect that draws attention naturally. Each interaction creates an engaging visual experience, allowing users to control what they see and explore the contrast at their own pace. The result is dynamic, interactive, and highly impactful.

Who is this plugin for?

This plugin is perfect for businesses, agencies, creative studios, e-commerce brands, nonprofits, and individuals who want to highlight transformations, product comparisons, or design improvements in a visually appealing way. It’s ideal for Squarespace users who want to demonstrate value, showcase before/after results, or create interactive storytelling while keeping the layout minimal and user-friendly.

$25 Single Website ‍ ‍ $55 Unlimited Websites

Benefits of the Before and After Image Slider

✓ Captures visitor attention instantly with an interactive, drag-to-reveal slider

✓ Showcase transformations, comparisons, or product improvements in a single space

✓ Fully customizable - control slider handle color, border, shadow, label style, and position

✓ Supports labels for “Before” and “After” that can be dynamically set via data attributes

✓ Responsive design ensures the slider looks perfect on desktop, tablet, and mobile

✓ Lightweight and fast - no heavy scripts or third-party libraries required

✓ Easy to install - copy and paste directly into Squarespace pages using code blocks

✓ Compatible with Squarespace 7.0 and 7.1

✓ Perfect for product demos, renovations, makeovers, or any visual comparison

✓ Enhances user experience with a modern, interactive visual display that feels dynamic

To properly install this plugin you will need a Core Plan or higher (not Basic plans).

    • All plugins are sold with a single-use license. This means each license allows the plugin to be used on one website or project only. Sharing, redistributing, or reselling the plugin code is strictly prohibited.

    • This plugin cannot be used as part of a template for sale.

Single License$25 Single Website
Multi-Use License$55 Unlimited Websites

FAQs

  • This plugin is compatible with Squarespace 7.1 and 7.0. However, you will need to have a Squarespace Core Plan or higher.

  • Absolutely, Before And After Image Slider are fully responsive and display cleanly on desktop, tablet, and mobile devices.

  • Simply copy and drop the code. A step-by-step installation guide on how to install this plugin is also included with the download files.

  • Yes, this plugin is customisable in terms of control text content, font size, color, weight, alignment, speed, and step increment.

  • No, it is set up to be copied and pasted. Simply follow the step-by-step installation guide that is included with the download files.

  • Yes, we provide plugin installation service for an additional cost at checkout.

  • No, this plugin can only be used on single site.

  • Once purchased you'll get a welcome document with instructions on how to install it. Also, an instructional video will also help walk you through how to install the plugin.

  • The plugin is cloud-hosted, so minor updates are applied automatically. If Squarespace introduces a major breaking change, a new version of the plugin will be released and access will be provided. An email notification will be sent with instructions on how to update the plugin script to use the latest version.

  • No. This plugin is a digital product and as such it cannot be returned.

  • Unfortunately we cannot guarantee compatibility with third party code based on potential conflicts within the ways they are written or the functionalities they provide.

  • Our plugin should not have a noticeable impact on your site’s performance. Squarespace itself loads and processes thousands of lines of code to render a page, so the additional code introduced by the plugin is relatively minimal. It is also best practice to stay within Squarespace’s recommended limits for the number of sections and blocks on a page to ensure optimal performance.