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 easy tutorial will help you add a before and after image slider to your website using a little 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. Or, you can use this handy image URL feature from Beyondspace.

Next, go to the page you want to add your image slider to and click Add Block then Code block. Add this code to the block. Replace 'beforeURL' and 'afterURL' with the URLs to your before and after images.

<style>
  .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;
    user-select: none;
  }
  .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;
  }
  .slider-handle::before {
    left: -24px;
    border-right: 16px solid #fff;
  }
  .slider-handle::after {
    right: -24px;
    border-left: 16px solid #fff;
  }
</style>

<div class="custom-image-slider">
  <img class="slider-before" src="//static1.squarespace.com/static/66fe77383a1f957a96cef620/t/67dd97b1adfaae655c9302ce/1742575538218/simon-lee-hrOXaenH640-unsplash.jpg" alt="Before">
  <img class="slider-after" src="//static1.squarespace.com/static/66fe77383a1f957a96cef620/t/67dd97b1b0e26e3731f9e4fc/1742575538135/simon-lee-z1vpjHAq1o8-unsplash.jpg" alt="After">
  <div class="slider-handle"></div>
</div>

<!-- Duplicate the above slider as many times as needed -->

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const sliders = document.querySelectorAll(".custom-image-slider");
    sliders.forEach(function (container) {
      const afterImage = container.querySelector(".slider-after");
      const handle = container.querySelector(".slider-handle");
      const initialPercentage = 50;
      handle.style.left = `${initialPercentage}%`;
      afterImage.style.clipPath = `inset(0 ${100 - initialPercentage}% 0 0)`;
      let dragging = false;
      let lastX = 0;
      
      // Mouse events
      handle.addEventListener("mousedown", (e) => {
        dragging = true;
        lastX = e.clientX;
        e.preventDefault();
      });
      container.addEventListener("mouseup", () => { dragging = false; });
      container.addEventListener("mouseleave", () => { dragging = false; });
      container.addEventListener("mousemove", (e) => {
        if (!dragging) return;
        const rect = container.getBoundingClientRect();
        const x = e.clientX - rect.left;
        let widthPercentage = (x / rect.width) * 100;
        widthPercentage = Math.max(0, Math.min(widthPercentage, 100));
        window.requestAnimationFrame(() => {
          handle.style.left = `${widthPercentage}%`;
          afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
        });
        lastX = x;
      });
      
      // Touch events
      handle.addEventListener("touchstart", (e) => {
        dragging = true;
        lastX = e.touches[0].clientX;
        e.preventDefault();
      });
      container.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;
        widthPercentage = Math.max(0, Math.min(widthPercentage, 100));
        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.