How to Add a Before After Image Slider to Your Squarespace Website | Squarespace 7.1

How to Add Before After Image Slider to Squarespace Website | Squarespace 7.1

If you're looking to showcase a "before and after" image comparison on your Squarespace 7.1 website, this blog post will guide you through a simple process. By using HTML, CSS, and JavaScript, you can add an interactive image slider to display your images side by side. The best part? You can customize it to fit your website's design and functionality.

Steps to Add the Before-and-After Image Slider:

Step 1: Add a Code Block

1. Log into your Squarespace account and go to the page where you want to add the image slider.

2. Click Edit on the page.

3. In the page editor, click the + icon to add a new content block.

4. Select Code from the list of available blocks. This will open the HTML editor.

Step 2: Insert HTML Code for the Slider

Now, you will paste the following HTML code into the code block:

01

02

03

<section class="before-after">
  <img class="img back-img" src=" YOUR-IMAGE-URL " alt="before" />
  <img class="img front-img" src=" YOUR-IMAGE-URL " alt="after" />
  <input type="range" min="1" max="100" value="50" class="slider" name="slider" id="slider" />
</section>

Make sure to replace the YOUR_IMAGE_URL with the URLs of your "before" and "after" images, which we will add in the next steps.

Step 3: Upload Your Images

1. Go to the Website Manager and click on Settings > Files.

2. Upload the images you want to use for the slider.

3. Once the images are uploaded, click on each image to get its URL. Copy the URL for both the "before" and "after" images.

4. Go back to the HTML code block and paste the image URLs in the src="YOUR_IMAGE_URL" placeholder in both the before-image and after-image sections.

04

05

06

07

08

Step 4: Add CSS for Styling

Now that you’ve added the HTML structure for your slider, we need to style it using custom CSS. To do this:

1. In the page editor, go to Design > Custom CSS.

2. Paste the following CSS code:

//WWW.SQUARESPELL.CO.UK//
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.before-after {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-height: 50vh;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.before-after .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after .img.front-img {
  z-index: 1;
  /* Crop half of the front image */
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 
SEPERATE -webkit-slider-thumb AND -moz-range-thumb FOR CHROME AND FIREFOX, OTHERWISE RANGE INPUT CUSTOM STYLES DON'T WORK 
*/

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 7px;
  min-height: 50vh;
  cursor: pointer;
  background-color: white;
  border: 1px solid #c2c2c2;
  border-radius: 0;
}

.slider::-moz-range-thumb {
  -moz-appearance: none;
  width: 7px;
  min-height: 50vh;
  cursor: pointer;
  background-color: white;
  border: 1px solid #c2c2c2;
  border-radius: 0;
}
//WWW.SQUARESPELL.CO.UK//

This CSS will style the image slider, ensuring the "before" and "after" images align correctly and the slider looks clean and smooth.

Step 5: Add JavaScript for Functionality

To make the slider interactive, we need to add some JavaScript. Here's the script that will allow users to click and drag the slider to reveal the "after" image:

1. Go to Settings > Advanced > Code Injection.

2. Paste the following JavaScript code into the Header section:

This JavaScript code adds the functionality to drag the slider button and adjust the width of the "before" image.

Step 6: Save and Preview

Once you've added the HTML, CSS, and JavaScript:

1. Click Save in the code block.

2. Save your changes on the page editor and preview your website to see the before-and-after image slider in action.

---

Conclusion

By following these simple steps, you can easily add an interactive before and after image slider to your Squarespace 7.1 website. Whether you're showcasing a product transformation or highlighting a design project, this slider can engage visitors and provide a fun, interactive experience.

Feel free to adjust the styling and functionality to better fit your website's design. Enjoy!