Before/After Image Slider Comparison (HTML, CSS, and JavaScript)

Thank you!! Is it possible to add a code to track your mouse movement on hover?

Great video, I do have a question though. I'm building a business website that requires me to show before and after pics of jobs I've done, I've added four sliders to my page but I'm only able to use the slider on the first image, the other three can't be moved from left to right. I've tried adding a class to each individual slider and updated the JScript but nothing seems to work. Any help on this would be much appreciated.

Thanks man, u really helpful

You are the man!

see code below for working with multiple sliders
````
const els = document.querySelectorAll(".container")

els.forEach(el => {
for (let i = 0; i < el.childNodes.length; i++) {
if (el.childNodes[i].className === "slider") {
let j = el.childNodes[i];
j.addEventListener('input', (e) => {
el.style.setProperty('--position', `${e.target.value}%`);
})
}
}
})

const container = document.querySelector('.container');
document.querySelector('.slider')
````

This is so fantastic. Exactly what I am looking to do. My only challenge is that I would love to have the images go full screen, both height and width. Would this be an easy fix?

I just have one question, I need to make the image size to be like the container size . When I add my images they was to big and I didn’t know what to do . Thanks for your time !

great job brother. but may i ask something, i want put 2 or more this image comparison on one page but it doesnt work, only the first one work, can u help me how to make more than one image comparison on one page? thank GBU

Thank you for this, fantastic! I was doing it quickly, and it wouldn't work, then, of course, in js I found that I used normal single quote marks instead of the back ones. I works like magic :)

amazing, thanks

I learned so much in this video! thxs

How can i add before / after text. Can you help me please?

How Can I import images option instead of adding images every time?

Oh wow, this video is amazing! How can I use it in my Shopify Shop? Any ideas? Thank´s a lot

Thank you SO much! I was able to customize this for my website perfectly.

thanks man the way you are explaining things is very simple and great !

Hi bro ! It was a very interested video and the code works very well. Except that, my before image doesn't act like it should do. My before image's container is actually the space between the left border of the whole container and the slider's vertical bar. So each time I'm sliding, my before image's width is changing, making an unexpected zoom effect. Do you know how to fix it please ?

how can we do vertical ?

hey bro ı made perfectly but there is only one problem . the before image having a sharpness i dont know why . my images same resulotion but on the left image having an sharpness or kinda filter . how can i solve it, please help??

So close but so far. I can get as far as having the images over lap and add the slider. But I cant move it. Its just like a static image I assume that the javascirpt isnt working, but I have no idea why.

Love the video, just wondering what editor you are using?

Hi, this is a great video! Thanks a lot :) Would you be able to code it on REACT?

Perfect thank you

will this work with a squarespace website?

could this be done with videos?

Thank you so much for the video-Do you have any videos explaining how to turn this all into HTML? I am a complete beginner to code and for my website it will only let me put in the HTML part. I found websites that explain it but I don't understand what any of it means ':)

Hey I tried adding this code to my website with an iframe but the Iframe doesnt load on iphones or on safari do you know a fix for this I would really apreciate a response

What if we want to change some content based on the after before images like when its after the text will be different and when its before the other div will show?

What if you have multple image sliders? The code doesn't work if there are more than one sliders. :(

Can someone help me work this out on angular, please? 🙏

be regular .

Absolutely amazing! It's a very creative and smart idea to use an input with the range type here. It was very interesting and informative, thank you, Chris!

Can I please ask that you try to start your projects with empty files. The is the reason behind the most successful coding channels like Traversy Media, NetNinja and even Wes Bos courses. It puts people off when you already have multiple files open and distracts from the tutorial. This tutorial was perfect because a person can follow along from the start.

Congratz Chris for this nice content as over and over 🙏 totally crazy and genius 👌

You did it, once again... Just can't stop with the amazement!
Jaw-dropping good!

Thank you so much 😍😍

This is very interesting! I have always wondered how such things were developed.

Great content! btw what theme do you use? and The Icon Pack

Dang you made that look so easy. Nicely explained and great to see the consideration for accessibility

As always the best content ❤ thank you!

Very helpful

You are awesome
Lovely content