Free Squarespace Before After Slider

Jan 9

Written By Toni Hill - Founder of The Square Genius

Squarespace Before After Slider: How to Install & Use It on Your Website

A Squarespace Before After Slider is one of the most powerful visual tools you can add to your website. Instead of telling people what’s changed, improved, or transformed, you let them see it instantly.

Whether you’re showcasing:

a website redesign
branding before and after
photography edits
charity impact projects
home, interior, or exterior transformations

a before and after slider makes your content more engaging, more memorable, and far more convincing.

This guide shows you exactly how to install and use the Squarespace Before After Slider, step by step.

👉 You can view a live demo here

Why use a Squarespace Before After Slider?

A before and after slider:

instantly shows progress or transformation
keeps visitors interacting with your content
works brilliantly for case studies and portfolios
helps tell a clear visual story without extra text
looks polished and professional

It’s especially effective for designers, charities, photographers, videographers, and purpose-led organisations that want to show impact, not just talk about it.

What you need before installing

Before you start, make sure you have:

Two image URLs (Before and After)
Access to Custom CSS
Access to Code Injection in Squarespace

You only need to install the CSS and JavaScript once. After that, you can add sliders anywhere using a simple code block.

Step 1: Add the CSS

Go to Pages > Scroll down to Custom Code > Custom CSS
Paste in the CSS provided below and hit save

This controls the layout, handle, labels, and overall appearance of the slider.

/* Before After Slider By The Square Genius */

.tsg-ba{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:20px;
  user-select:none;
  touch-action:none;
  background:#f2f2f2;
}

/* Force BOTH images into the same frame */
.tsg-ba__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

/* “Before” is the base layer */
.tsg-ba__img--before{ z-index:1; }

/* Mask for the “after” image */
.tsg-ba__after-wrap{
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
  z-index:2;
}

.tsg-ba__divider{
  position:absolute;
  top:0; left:50%;
  width:2px;
  height:100%;
  background:rgba(255,255,255,0.9);
  transform:translateX(-1px);
  z-index:3;
}

.tsg-ba__handle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,0.95);
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  padding:0;
  z-index:4;
}
.tsg-ba__handle:active{ cursor:grabbing; }
.tsg-ba__handle-icon{ font-size:18px; line-height:1; }

.tsg-ba__label{
  position:absolute;
  top:14px;
  padding:7px 12px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:13px;
  border-radius:999px;
  letter-spacing:0.2px;
  z-index:5;
}
.tsg-ba__label--before{ left:14px; }
.tsg-ba__label--after{ right:14px; }

Step 2: Add the JavaScript

Go to Pages > Scroll down to Custom Code > Code Injection
Paste the JavaScript into the Footer Area


<!-- BEFORE AFTER SLIDER -->
<script>
(function(){
  function initSlider(slider){
    if(slider.dataset.tsgInit === "true") return;
    slider.dataset.tsgInit = "true";

    const afterWrap = slider.querySelector('.tsg-ba__after-wrap');
    const divider = slider.querySelector('.tsg-ba__divider');
    const handle  = slider.querySelector('.tsg-ba__handle');

    const beforeImg = slider.querySelector('.tsg-ba__img--before');
    const afterImg  = slider.querySelector('.tsg-ba__img--after');

    const labelBeforeEl = slider.querySelector('.tsg-ba__label--before');
    const labelAfterEl  = slider.querySelector('.tsg-ba__label--after');

    // Labels from data attributes
    const lb = slider.getAttribute('data-label-before');
    const la = slider.getAttribute('data-label-after');
    if(lb && labelBeforeEl) labelBeforeEl.textContent = lb;
    if(la && labelAfterEl)  labelAfterEl.textContent  = la;

    // Object position override (e.g., "top center")
    const objPos = slider.getAttribute('data-object-position');
    if(objPos){
      if(beforeImg) beforeImg.style.objectPosition = objPos;
      if(afterImg)  afterImg.style.objectPosition  = objPos;
    }

    // Lock the frame using BEFORE image ratio
    function setAspectRatio(){
      if(!beforeImg) return;
      const w = beforeImg.naturalWidth;
      const h = beforeImg.naturalHeight;
      if(w && h){
        slider.style.aspectRatio = `${w} / ${h}`;
      }
    }
    if(beforeImg){
      if(beforeImg.complete) setAspectRatio();
      else beforeImg.addEventListener('load', setAspectRatio, { once:true });
    }

    let dragging = false;

    function setPositionFromClientX(clientX){
      const rect = slider.getBoundingClientRect();
      const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
      const pct = (x / rect.width) * 100;

      if(afterWrap) afterWrap.style.width = pct + '%';
      if(divider) divider.style.left = pct + '%';
      if(handle) handle.style.left = pct + '%';
    }

    function onPointerDown(e){
      dragging = true;
      slider.setPointerCapture?.(e.pointerId);
      setPositionFromClientX(e.clientX);
    }
    function onPointerMove(e){
      if(!dragging) return;
      setPositionFromClientX(e.clientX);
    }
    function onPointerUp(){ dragging = false; }

    slider.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);

    // Keyboard support
    if(handle){
      handle.setAttribute('tabindex', '0');
      handle.addEventListener('keydown', (e) => {
        const rect = slider.getBoundingClientRect();
        const currentLeft = parseFloat((divider && divider.style.left) || '50');
        const step = (e.shiftKey ? 5 : 2);
        if(e.key === 'ArrowLeft')  setPositionFromClientX(rect.left + ((currentLeft - step)/100)*rect.width);
        if(e.key === 'ArrowRight') setPositionFromClientX(rect.left + ((currentLeft + step)/100)*rect.width);
      });
    }
  }

  function initAll(){
    document.querySelectorAll('.tsg-ba').forEach(initSlider);
  }

  // Initialise now
  initAll();

  // Re-initialise for Squarespace lazy-loaded content
  const mo = new MutationObserver(() => initAll());
  mo.observe(document.body, { childList:true, subtree:true });
})();
</script>


<!-- END BEFORE AFTER SLIDER -->

Step 3: Add the slider to a page

To add your Squarespace Before After Slider anywhere on your site:

Edit the page
Add a Code Block
Paste the slider HTML below
Replace the image URLs with your own

<div class="tsg-ba"
  data-label-before="Before"
  data-label-after="After"
  data-object-position="center">

  <img class="tsg-ba__img tsg-ba__img--before"
       src="YOUR-BEFORE-IMAGE-URL"
       alt="Before image">

  <div class="tsg-ba__after-wrap">
    <img class="tsg-ba__img tsg-ba__img--after"
         src="YOUR-AFTER-IMAGE-URL"
         alt="After image">
  </div>

  <div class="tsg-ba__divider"></div>

  <button class="tsg-ba__handle">
    <span class="tsg-ba__handle-icon">↔</span>
  </button>

  <div class="tsg-ba__label tsg-ba__label--before">Before</div>
  <div class="tsg-ba__label tsg-ba__label--after">After</div>
</div>

Change label text within the code block:

data-label-before="Old version"
data-label-after="New version"

A Squarespace Before After Slider is one of those small additions that makes a huge difference. It adds interaction, clarity, and visual storytelling to your website without slowing it down or complicating your layout.

If you regularly show transformations, improvements, or impact, this plugin is an easy win — and a brilliant way to keep visitors engaged.

Did I help you? Consider buying me a coffee as thanks!

You might also be interested in these super useful Squarespace Plugins:

Featured

Quick View

Genius Squarespace Filter Plugin

Quick View

Squarespace Product Pagination Plugin

Quick View

Squarespace Content Reveal Plugin

10% Off Squarespace use code: GENIUS10

Featured

Honest SEOSpace Review: Does it Boost Squarespace SEO?

Add Product Pagination (Previous, Next Links) to Squarespace 7.1 — The Complete Guide

How to Add a Show More Button in Squarespace

FREE Smart Promo Bar - Squarespace Ecommerce Plugin

How To Round The Corners on Squarespace Video Block

Genius Filter Plugin vs Universal Filter Squarespace Plugin

10 Squarespace Plugins I Cant Live Without

How to Add a Simple Squarespace Vertical Timeline

Toni Hill - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more. I am also a CSS enthusiast and love to create cool plugins for Squarespace websites.

https://www.thesquaregenius.com/author-toni-williams