Before and After Image Slider

How to Add a Before and After Image Slider Effect in Squarespace 7.1

Easily create an interactive slider to showcase transformations, comparisons, or other side-by-side visuals on your Squarespace site. Follow this simple guide to get started.

Features

• Interactive Slider: Users can drag the handle to reveal the comparison.

• Responsive Design: Works perfectly on desktop and mobile.

• Customizable Style: Easily tweak dimensions and styles.

• Lightweight Code: Designed for fast loading.

Difficulty Level

• Total Beginner: 6/10 (Basic CSS and JavaScript knowledge is helpful, but you can follow along easily!)

• Intermediate: 4/10 (Simple CSS and JavaScript copy-pasting)

• Expert: 2/10 (Quick and simple)

Finding Image URLs in Squarespace

To set up the Before and After Image Slider, you will need the direct URLs of the images you want to use. Here’s how to locate them in Squarespace:

1. Navigate to your Squarespace Dashboard.

2. Go to Website > Pages > Assets.

3. If the images are not already uploaded, click Add Image and upload the files you want to use.

4. Once uploaded, click on the image to open its details.

5. Copy the Direct URL listed for the image.

6. Save this URL to use in the HTML code during setup.

This process allows you to accurately reference your images within the slider HTML. Use the URLs in Step 1 of this guide.

Step 1: Add the Slider Code Block

1. Edit Your Page:

   • In your Squarespace dashboard, navigate to the page where you want the slider.

   • Click Edit to open the page editor.

2. Add a Code Block:

   • Click the + icon where you want the slider to appear.

   • Select Code from the block options.

3. Insert the HTML Code:

   • Paste this code into the block:

<div class="before-after-container">
  <div class="before-image">
    <img src="BEFORE_IMAGE_URL" alt="Before Image">
  </div>
  <div class="after-image">
    <img src="AFTER_IMAGE_URL" alt="After Image">
  </div>
  <div class="divider-line"></div>
  <input type="range" min="0" max="100" value="50" class="slider" aria-label="Image comparison slider">
</div>

Copy Code

Replace Image URLs:

• Replace BEFORE_IMAGE_URL and AFTER_IMAGE_URL with the direct URLs of your images. See the previous section for ‘how to’.

Save your changes to apply the effect to all images on your site.

Step 2: Style the Slider with CSS

1. Go to Custom CSS:

   • Navigate to Website > Pages > Website Tools > Custom CSS in your Squarespace dashboard.

2. Add This CSS:

   • Paste the following code:

/* Before and After Slider for Specific Image */
.before-after-container {
  position: relative;
  max-width: 600px; /* Adjust as needed */
  width: 100%;
  margin: 2rem auto;
  overflow: hidden;
}

.before-after-container .before-image,
.before-after-container .after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.before-after-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Initially, we won't rely on a static clip; 
   The JS will set it after images load.
   By default, half will be shown once JS runs.
*/
.before-after-container .after-image {
  /* Placeholder, JS overrides after load */
  clip: rect(0, 50%, 100%, 0);
  transition: clip 0.2s ease;
}

/* The divider line is hidden */
.before-after-container .divider-line {
  display: none;
}

/* Slider styling */
.before-after-container .slider {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.before-after-container .slider::-webkit-slider-thumb,
.before-after-container .slider::-moz-range-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #222;
  border-radius: 50%;
  cursor: grab;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

@media (max-width: 640px) {
  .before-after-container .slider {
    bottom: 20px;
  }
}

Copy Code

Save your changes to apply the effect to all images on your site.

Step 3: Add JavaScript for Interaction

1. Open Code Injection:

   • Navigate to Website > Pages > Website Tools > Code Injection in your Squarespace dashboard.

2. Insert the JavaScript:

   • In the Footer section, paste this code:

<script>
/* Slider Interaction Script */
document.addEventListener('DOMContentLoaded', function() {
  var containers = document.querySelectorAll('.before-after-container');

  containers.forEach(function(container) {
    var slider = container.querySelector('.slider');
    var afterImage = container.querySelector('.after-image');
    var beforeImg = container.querySelector('.before-image img');
    var dividerLine = container.querySelector('.divider-line');

    // Once the before image loads, set container height and initial clip
    if (beforeImg.complete) {
      initializeContainer();
    } else {
      beforeImg.addEventListener('load', initializeContainer);
    }

    function initializeContainer() {
      // Set container height to match the before image
      container.style.height = beforeImg.offsetHeight + 'px';

      // Set initial slider position at 50%
      slider.value = 50;
      updateClip(50);

      // Position the divider line at 50% (though currently hidden)
      dividerLine.style.left = container.offsetWidth / 2 + 'px';
      dividerLine.style.height = container.offsetHeight + 'px';
    }

    function updateClip(value) {
      var containerWidth = container.offsetWidth;
      var containerHeight = container.offsetHeight;
      var clipValue = (value / 100) * containerWidth;

      afterImage.style.clip = "rect(0, " + clipValue + "px, " + containerHeight + "px, 0)";

      // Move the divider line to match the clipping boundary (if shown)
      dividerLine.style.left = clipValue + 'px';
    }

    slider.addEventListener('input', function() {
      var value = parseInt(this.value, 10);
      updateClip(value);
    });
  });
});
</script>

Copy Code

Save your changes to apply the effect to all images on your site.

Troubleshooting

• Images Not Loading: Ensure your image URLs are correct and properly copied from Website > Pages > Assets.

• Slider Not Appearing: Make sure you’ve added the HTML code in a Code Block on the correct page.

• Slider Not Moving: Check that the JavaScript is correctly added in the Footer section of Code Injection.

• CSS Changes Not Showing: Clear your browser cache to ensure the latest styles are applied.

If you need any help with your install, get in touch with us letstalk@usual.ie!

Explore More Plugins

Looking for more ways to enhance your Squarespace site? Check out our full range of Squarespace Plugins to boost functionality and user experience.