How to Add a Before After Image Slider in Squarespace 7.1
The before-and-after image slider in Squarespace lets users visually compare two images using an interactive slider. It enhances UX, boosts engagement, and improves content clarity for portfolios, product transformations, and service showcases.
This guide explains how to add one in Squarespace 7.1, including plugins, code, and best practices.
What Is a Before–After Image Slider in Squarespace?
A before-and-after image slider is a web component that overlays two images, allowing the user to slide between them interactively.
Usage Examples:
Renovation portfolios
Skincare treatment results
Before/after photo edits
Fitness progress visuals
Main Benefits:
Highlights the visual transformation
Increases dwell time
Creates interactive user experiences
In Squarespace, this feature requires custom code or a plugin because it is not natively available.
Does Squarespace 7.1 include a Built-In Before slider?
No, Squarespace 7.1 does not include a native before–and–after image slider. The Image Block, Gallery Block, and Carousel elements lack this capability.
Limitations:
No overlay image functionality
No draggable handle or comparison tool
Limited interactivity for before/after displays
To achieve this, users need custom JavaScript.
Step-by-Step Instructions
We’ll build this using HTML, CSS, and JavaScript.
Squarespace doesn’t offer this feature by default, but you can easily add it using a Code Block and Custom CSS.
Step 1: Upload Your Images to Squarespace
Go to Settings > Files
Upload two images: one for “Before” and one for “After”
Copy their image URLs (right-click > Copy URL)
Make sure the images are the same size (e.g., 800x500px) for a perfect match.
Step 2: Add the HTML Code
Edit your page
Add a Code Block
Paste the following HTML inside it:
<div class='modern-compare-container'>
<img src='https://images.squarespace-cdn.com/content/67f647dabf7d9c5b5f7d5f32/dcdc9e1e-ddea-4475-bbad-2e5b5d03b369/12994.jpg?content-type=image%2Fjpeg' class='modern-after-img' />
<div class='modern-slider-overlay'>
<img src='https://images.squarespace-cdn.com/content/67f647dabf7d9c5b5f7d5f32/f76c3ad6-9813-4a5a-b32b-4f3828582aee/2149098324.jpg?content-type=image%2Fjpeg' class='modern-before-img' />
</div>
<div class='modern-slider-handle'>
<span class='drag-icon'>⇆</span>
</div>
</div>
Replace the image URLs with your uploaded images.
Step 3: Add the CSS Code
Go to Design > Custom CSS
Paste this CSS code to style the slider:
/* Container for the before-after slider */
.modern-compare-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 60px auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
aspect-ratio: 16 / 10; /* Ensures height consistency */
}
/* After Image (Background) */
.modern-after-img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 0;
}
/* Before Image Overlay */
.modern-slider-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
width: 50%;
z-index: 1;
pointer-events: none;
}
.modern-before-img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* Slider Handle */
.modern-slider-handle {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
background-color: #fff;
border: 2px solid #ff6600;
border-radius: 50%;
cursor: ew-resize;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #ff6600;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
z-index: 2;
transition: background-color 0.3s;
}
.modern-slider-handle:hover {
background-color: #ff6600;
color: white;
}
/* Icon */
.drag-icon {
user-select: none;
pointer-events: none;
}
This CSS controls the layout, drag bar, and transitions.
Step 4: Add JavaScript to Make It Work
Go to Settings > Advanced > Code Injection > Footer
Paste the following JavaScript code:
<script>
document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".modern-compare-container");
const overlay = container.querySelector(".modern-slider-overlay");
const handle = container.querySelector(".modern-slider-handle");
const updatePosition = (clientX) => {
const rect = container.getBoundingClientRect();
let pos = Math.max(0, Math.min(clientX - rect.left, rect.width));
overlay.style.width = pos + "px";
handle.style.left = pos + "px";
};
const startDrag = (e) => {
e.preventDefault();
const moveHandler = (e) => {
const x = e.touches ? e.touches[0].clientX : e.clientX;
updatePosition(x);
};
const stopHandler = () => {
document.removeEventListener("mousemove", moveHandler);
document.removeEventListener("touchmove", moveHandler);
document.removeEventListener("mouseup", stopHandler);
document.removeEventListener("touchend", stopHandler);
};
document.addEventListener("mousemove", moveHandler);
document.addEventListener("touchmove", moveHandler);
document.addEventListener("mouseup", stopHandler);
document.addEventListener("touchend", stopHandler);
};
handle.addEventListener("mousedown", startDrag);
handle.addEventListener("touchstart", startDrag, { passive: true });
// Set initial position
updatePosition(container.offsetWidth / 2);
});
</script>
This script enables dragging functionality for the orange handle bar.
Final Result
Once you've added all the above:
Visitors will see both images aligned
They can drag left and right to compare the two
It works great on desktop, tablet, and mobile
Frequently Asked Questions (FAQ)
1. Is it possible to add a before-and-after image slider to Squarespace with no code?
No, Squarespace 7.1 doesn’t come with a native before-and-after slider. You can do this with a custom HTML, CSS, and JavaScript code block or by using a third-party plugin.
2. Are my before and after pictures supposed to be the same dimensions?
Yes. In order to make your slider look professional and fit perfectly, both images will need to be the same size (say 800x500px). Size mismatch may result in layout and cropping issues.
3. Does the slider work for mobiles?
Yes. The answer is a responsive design that includes aspect ratio and object-fit: cover so it works consistently for desktop, tablet & mobile screens.
4. Am I able to choose the color or style I would like for the handle?
Absolutely. The slider handle is fully stylable via CSS. For example, you can change:
Background color: background-color: #fff;
Border color: border: 2px solid #ff6600;
Icon: Change ⇆ with any Unicode character or icon font.
5. Will the Squarespace site speed be affected by this?
No, this approach has lightweight code, does not involve any big external libraries. It becomes performance-friendly if you use it properly!
