Usual

View Original

Before and After Image Slider

Paul Reeves

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.

See this content in the original post

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:

See this content in the original post

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:

See this content in the original post

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:

See this content in the original post

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.