Jump to content

Before and After Image Slider

Recommended Posts

Hi all. I've been trying to add a before/after image slider to my website. I sourced this html, css and javascript from Chris Penningtonhttp:// https://codepen.io/Coding-in-Public/pen/NWyjZwO (https://youtu.be/dzqDU9efnnk?si=KN88fjj8Hzi6aoVl)

He is using VSCode editor in his youtube tutorial video. I've been able to get everything to upload on Squarespace, using the url's for my own images, etc. It looks great but I can't get the script to run. I'm totally a novice at coding and don't know much about it. What am I missing from the Javascript to have the slider actually move in across my image? Or is there something else wrong that I'm missing?? Help! I've linked a screenshot of the image and url to my webpage for reference.

Here is what is on my CSS style sheets:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

iframe {
  aspect-ratio: 16/9;
}

img {
  display: block;
  max-width: 100%;
}

main {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.container {
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%;
}

.image-container {
  max-width: 800px;
  max-height: 90vh;
  aspect-ratio: 1/1;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
}

.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  /* for Firefox */
  width: 100%;
  height: 100%;
}

.slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.slider-line {
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  /* z-index: 10; */
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-button {
  position: absolute;
  background-color: #fff;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* z-index: 100; */
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}

Here is what is in my Page Code Injection Block:

<div class="container">
<div class="image-container">
     <img class="image-before slider-image"
            src="https://images.squarespace-cdn.com/content/v1/63dd4f842db8d43be717b5d1/9ef71703-bf8b-4e84-919c-4fa73107403e/IMG_5825.JPG?format=750w"
            alt="color photo"
          />
      <img class="image-after slider-image"
            src="https://images.squarespace-cdn.com/content/v1/63dd4f842db8d43be717b5d1/142a0c6e-7998-4286-825e-f9fb5cdc263a/IMG_9909.jpeg?format=750w"
            alt="color photo"
          />
    </div>
        <!-- step="10" -->
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          aria-label="Percentage of before photo shown"
          class="slider"
        />
        <div class="slider-line" aria-hidden="true"></div>
        <div class="slider-button" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="30"
            fill="currentColor"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none"></rect>
            <line
              x1="128"
              y1="40"
              x2="128"
              y2="216"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            ></line>
            <line
              x1="96"
              y1="128"
              x2="16"
              y2="128"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            ></line>
            <polyline
              points="48 160 16 128 48 96"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            ></polyline>
            <line
              x1="160"
              y1="128"
              x2="240"
              y2="128"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            ></line>
            <polyline
              points="208 96 240 128 208 160"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            ></polyline>
          </svg>
        </div>
      </div>

<script>
  const container = document.querySelector('.container');
document.querySelector('.slider').addEventListener('input', (e) => {
  container.style.setProperty('--position', `${e.target.value}%`);
})</script>

What am i doing wrong?

Screenshot 2024-06-30 at 10.03.37 PM.png

Link to comment

My guess is that the problem stems from using classes and IDs like main, container, slider and img etc. that get used elsewhere on your website. The code works as a stand-alone in codepen but will have problems on a website so needs customisation to use unique classes and IDs. 

Honestly I save myself all of the time and hassle of using pure code and stump up a few bucks for plugin that is designed to work with Squarespace. This is one option of many:

https://www.will-myers.com/products/p/before-/-after-image-slider

Or:

https://www.rebeccagracedesigns.com/blog/before-after-image-slider-squarespace-7-1

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.