Alindberg

this one works great! Thanks alot

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

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

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.

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>