Free Squarespace Before After Slider

May 27

Written By Toni Hill - Founder of The Square Genius

Last updated 27/05/2026

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.

View A Demo

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;
}

/* After image is the base layer */
.tsg-ba__img--after{
  z-index:1;
}

/* Before image is the reveal layer */
.tsg-ba__before-wrap{
  position:absolute;
  inset:0;
  width:65%;
  overflow:hidden;
  z-index:2;
}

.tsg-ba__img--before{
  z-index:2;
}

.tsg-ba__divider{
  position:absolute;
  top:0;
  left:65%;
  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:65%;
  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;
}

/* CSS arrows instead of a text arrow to avoid emoji rendering on mobile */
.tsg-ba__handle-icon{
  position:relative;
  display:block;
  width:22px;
  height:14px;
}

.tsg-ba__handle-icon::before,
.tsg-ba__handle-icon::after{
  content:"";
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid #222;
  border-left:2px solid #222;
}

.tsg-ba__handle-icon::before{
  left:2px;
  transform:translateY(-50%) rotate(-45deg);
}

.tsg-ba__handle-icon::after{
  right:2px;
  transform:translateY(-50%) rotate(135deg);
}

.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 BY THE SQUARE GENIUS -->
<script>
(function(){
  function initSlider(slider){
    if(slider.dataset.tsgInit === "true") return;
    slider.dataset.tsgInit = "true";

    const beforeWrap = slider.querySelector('.tsg-ba__before-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
    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 the after/base image ratio
    function setAspectRatio(){
      const ratioImg = afterImg || beforeImg;
      if(!ratioImg) return;

      const w = ratioImg.naturalWidth;
      const h = ratioImg.naturalHeight;

      if(w && h){
        slider.style.aspectRatio = `${w} / ${h}`;
      }
    }

    if(afterImg){
      if(afterImg.complete) setAspectRatio();
      else afterImg.addEventListener('load', setAspectRatio, { once:true });
    }

    let dragging = false;

    function setPositionPercent(pct){
      const safePct = Math.min(Math.max(pct, 0), 100);

      if(beforeWrap) beforeWrap.style.width = safePct + '%';
      if(divider) divider.style.left = safePct + '%';
      if(handle) handle.style.left = safePct + '%';
    }

    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;

      setPositionPercent(pct);
    }

    // Starting position from data-start attribute
    const start = parseFloat(slider.getAttribute('data-start')) || 50;
    setPositionPercent(start);

    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 currentLeft = parseFloat((divider && divider.style.left) || start || 50);
        const step = (e.shiftKey ? 5 : 2);

        if(e.key === 'ArrowLeft'){
          e.preventDefault();
          setPositionPercent(currentLeft - step);
        }

        if(e.key === 'ArrowRight'){
          e.preventDefault();
          setPositionPercent(currentLeft + step);
        }
      });
    }
  }

  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"
data-start="65">

  <img class="tsg-ba__img tsg-ba__img--after"
  src="YOUR IMAGE URL HERE"
  alt="After image">

  <div class="tsg-ba__before-wrap">
    <img class="tsg-ba__img tsg-ba__img--before"
    src="YOUR IMAGE URL HERE"
    alt="Before image">
  </div>

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

  <button class="tsg-ba__handle" aria-label="Drag to compare before and after image">
    <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 y updating this part of the code:

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

Change the data start number (the arrow position) in the html code block:

data-start="65">

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

Squarespace Directory Plugin

Quick View

Genius Squarespace Filter Plugin

Quick View

Squarespace Gallery Filter Plugin

10% Off Squarespace use code: GENIUS10

Genius Squarespace Filter Plugin

$59.99

Looking for an easy way to add filters to Squarespace?

The Genius Squarespace Filter Plugin helps you turn busy portfolio pages, blogs, event pages and gallery blocks into a cleaner, easier to browse experience.

Visitors can quickly filter your content by category, topic, service, location, resource type or any labels you choose, instead of scrolling through everything.

Perfect for portfolios, blog archives, event listings, gallery blocks, resource hubs and larger content collections, this plugin gives your visitors a smoother way to explore your content without the cost or complexity of custom development.

Portfolio Filter Demo ➜

NEW Advanced Dropdown Portfolio Filter Demo ➜

Gallery Block Filter Demo ➜

Blog Filter Demo ➜

Event Filter Demo ➜

Key Features:

Simple to install and customise
Filter options for portfolio pages, gallery blocks, blogs and events
Includes the new advanced dropdown portfolio filter
Ideal for Squarespace sites needing more in depth filtering options with a simple user experience
Beginner friendly setup with copy and paste instructions
Designed for Squarespace 7.1 websites

Featured

How to Add Animated Number Stats to Your Squarespace Website

Genius Filter Plugin vs Universal Filter Squarespace Plugin

Best Squarespace Filter Plugin for Photographers (2026)

How to Create a Directory in Squarespace

Best Squarespace Gallery Plugins for Better Portfolios, Filters and Image Layouts (2026)

Best Squarespace Plugins for Charities and Nonprofits (2026)

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