How to Create a Before and After Image Slider in Squarespace

A before and after image slider is a fantastic way to show two images side-by-side, with a slider to toggle between them.

You can use this type of slider to show off a renovation project, a beauty treatment… even how your town or city looked in the past!

Unfortunately, you can't build a before and after slider directly in Squarespace. However, this brilliant tutorial from Clarc Productions will help you add a before and after image slider to your website using a little CSS code.

Before you begin, upload your before and after images to your website and grab the URLs for both of them. Make sure the two images have the same dimensions.

Next, upload the following code to the CSS editor – you can get to this by clicking Website > Website Tools (scroll down) > Custom CSS.

.custom-image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 75%; /* Adjust this value according to your image aspect ratio */
}
.slider-before, .slider-after {
  position: absolute;
  width: 100%;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
}
.slider-after {
  overflow: hidden;
}
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background-color: #fff;
  cursor: ew-resize;
}
.slider-handle::before, .slider-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  cursor: ew-resize;
  transition: all 0.2s ease-out; /* Add transition property */
}
.slider-handle::before {
  left: -24px;
  border-right: 16px solid #fff;
}
.slider-handle::after {
  right: -24px;
  border-left: 16px solid #fff;
}

Now go to the page you want to add your image slider to and create a Code block. Add this code to the block. Replace 'beforeURL' and 'afterURL' with the URLs to your before and after images.

<style>
  .slider-before, .slider-after {
    user-select: none;
  }
</style>
<div class="custom-image-slider" id="customImageSlider">
  <img class="slider-before" src="beforeURL" alt="Before">
  <img class="slider-after" src="afterURL" alt="After">
  <div class="slider-handle"></div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.querySelector(".custom-image-slider");
    const afterImage = document.querySelector(".slider-after");
    const handle = document.querySelector(".slider-handle");
    // Set initial handle position and clipPath
    const initialPercentage = 50;
    handle.style.left = `${initialPercentage}%`;
    afterImage.style.clipPath = `inset(0 ${100 - initialPercentage}% 0 0)`;
    let dragging = false;
    let lastX = 0;
    // Add mouse event listeners
    handle.addEventListener("mousedown", (e) => {
      dragging = true;
      lastX = e.clientX;
      e.preventDefault();
    });
    document.addEventListener("mouseup", () => {
      dragging = false;
    });
    document.addEventListener("mouseleave", () => {
      dragging = false;
    });
    document.addEventListener("mousemove", (e) => {
      if (!dragging) return;
      const rect = container.getBoundingClientRect();
      const x = e.clientX - rect.left;
      let widthPercentage = (x / rect.width) * 100;
      // Add constraint to keep the handle within 1% of either edge
      widthPercentage = Math.max(0, Math.min(widthPercentage, 100));
      // Update handle position using requestAnimationFrame
      window.requestAnimationFrame(() => {
        handle.style.left = `${widthPercentage}%`;
        afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
      });
      lastX = x;
    });
    // Add touch event listeners
    handle.addEventListener("touchstart", (e) => {
      dragging = true;
      lastX = e.touches[0].clientX;
      e.preventDefault();
    });
    document.addEventListener("touchend", () => {
      dragging = false;
    });
    container.addEventListener("touchcancel", () => {
      dragging = false;
    });
    container.addEventListener("touchmove", (e) => {
      if (!dragging) return;
      const rect = container.getBoundingClientRect();
      const x = e.touches[0].clientX - rect.left;
      let widthPercentage = (x / rect.width) * 100;
      // Add constraint to keep the handle within 1% of either edge
      widthPercentage = Math.max(0, Math.min(widthPercentage, 100));
      // Update handle position using requestAnimationFrame
      window.requestAnimationFrame(() => {
        handle.style.left = `${widthPercentage}%`;
        afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
        });
      lastX = x;
    });
});
</script>

And that's all you need to do to add a high-quality slider to your Squarespace site!

If you want to add more before and after image sliders, just repeat the second piece of code.

Looking for more awesome ways to showcase your photos? Here are ten quick tweaks you can make to your image galleries.