HTML looks different when used in squarespace vs when view on its own in chrome

So I've been trying to create a simple before/after slider for my website and after a while i managed to do some copy pasting that eventually gave me this code.

The code works fine when simply put in a text document and launched as a html file but when added into a code block on squarespace the before picture streches with the slider rather than being cropped by it.

I'm really not good at coding and any help will be appreciated.

<div id="page">
<div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f277df199179a75be322/1595011709533/after.jpg" draggable="false"/>   </div>
  <div class="after">
    <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f26a402f1548b9366293/1595011696334/before.jpg
" draggable="false"/>
  </div>
  <div class="scroller">
    <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
  </div>
</div>
</div>


<script>// I hope this over-commenting helps. Let's do this!
// Let's use the 'active' variable to let us know when we're using it
let active = false;

// First we'll have to set up our event listeners
// We want to watch for clicks on our scroller
document.querySelector('.scroller').addEventListener('mousedown',function(){
  active = true;
  // Add our scrolling class so the scroller has full opacity while active
  document.querySelector('.scroller').classList.add('scrolling');
});
// We also want to watch the body for changes to the state,
// like moving around and releasing the click
// so let's set up our event listeners
document.body.addEventListener('mouseup',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});

// Let's figure out where their mouse is at
document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  // Their mouse is here...
  let x = e.pageX;
  // but we want it relative to our wrapper
  x -= document.querySelector('.wrapper').getBoundingClientRect().left;
  // Okay let's change our state
  scrollIt(x);
});

// Let's use this function
function scrollIt(x){
    let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
    document.querySelector('.after').style.width = transform+"px";
    document.querySelector('.scroller').style.left = transform-25+"px";
}

// Let's set our opening state based off the width, 
// we want to show a bit of both images so the user can see what's going on
scrollIt(450);

// And finally let's repeat the process for touch events
// first our middle scroller...
document.querySelector('.scroller').addEventListener('touchstart',function(){
  active = true;
  document.querySelector('.scroller').classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});</script>


<style>/* You can remove this page div in your website */
#page{
  width:100%;
  height:100%;
  position:absolute;
}

/* Our normalize css */
*{
  margin:0;
  box-sizing: border-box;
}

/* Our wrapper */
.wrapper{
  width: 900px;
  height: 600px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate3d(-50%,-50%,0);
  overflow:hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Our image information */
.before,
.after {
  width:100%;
  height:100%;
  max-width: 100%; 
  background-repeat:no-repeat;
  background-color: white;
  background-size: cover;
  background-position: center;
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
  overflow: hidden;
}

.content-image{
  height:100%;
  width:relative;
}

.after{
  width:30%;  
}

.scroller{
  width: 50px;
  height:50px;
  position: absolute;
  left:100px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background-color: transparent;
  opacity:0.9;
  pointer-events:auto;
  cursor: pointer;
}

.scroller:hover{
  opacity:1;
}

.scrolling{
  pointer-events:none;
  opacity:1;
  // z-index: 1;
}

.scroller__thumb{
  width:100%;
  height:100%;
  padding:2px;
}

.scroller:before,
.scroller:after{
  content:" ";
  display: block;
  width: 3px;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  z-index: 40;
  transition:0.1s;
  Background-size: cover;
}
.scroller:before{
  top:100%;
}
.scroller:after{
  bottom:100%;
}

/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller{
  border: 5px solid #fff;
}
.scroller:before,
.scroller:after{
  background: #fff;
}</style>

I don't know what template you are using, but I suspect you just need a little code tweak or two so maybe this will help:

https://www.will-myers.com/articles/super-easy-image-slider-in-squarespace-71-squarespace-70-brine-template

5 minutes ago, derricksrandomviews said:

I don't know what template you are using, but I suspect you just need a little code tweak or two so maybe this will help:

https://www.will-myers.com/articles/super-easy-image-slider-in-squarespace-71-squarespace-70-brine-template

I'm using this template https://codepen.io/nosurprisethere/pen/xrXjYV

the link you sent is unfortunately an image slider rather than a before after one. The problem i have is that when viewing the code in itself the slider works as intended but on squarespace the before image (on the left) sqeezes into the area to the left of the slider instead of being cropped by it.

https://www.rebeccagracedesigns.com/blog/before-after-image-slider-squarespace-website#:~:text=Before%2FAfter Image Sliders are,products in an interactive way.&text=The plugin uses the Stacked,with an “after picture”.

Give the site a second or two to load. 

7 minutes ago, derricksrandomviews said:

https://www.rebeccagracedesigns.com/blog/before-after-image-slider-squarespace-website#:~:text=Before%2FAfter Image Sliders are,products in an interactive way.&text=The plugin uses the Stacked,with an “after picture”.

Give the site a second or two to load. 

That one does not work with 7.1. She has a version for 7.1 but it's a paid plugin.

Can you post a link to your page?

2 minutes ago, rwp said:

Can you post a link to your page?

sure it is in swedish but it should'nt matter. The password is abc123 and the slider is at the bottom of the vfx page

https://www.amadeuslindberg.com/vfx

19 minutes ago, rwp said:

I've had this saved for a while, I don't even remember where I got it.

I've changed and tweaked it a bunch of times, and I have never really spent the time to get it 100% right.

I just added the svg from your code to it, and it looks a lot better.

Try it out, let me know what you think.

https://jsfiddle.net/pelletr1/h904prbz/latest/

Edit: I just plugged it all into your page from the console and it seems to work

this one works great! Thanks alot

https://codepen.io/r-w-p/pen/YzwBOQG

On 7/1/2021 at 2:05 AM, jerils33133 said:

Similar trouble seeking to upload an html file to root area for an associate program. Does every person have a solution for this but? 

Can ou share link to page where you added html? & Screenshot on squarespace view & chrome view?