this is such a good solution, i attempted to build this on my own before deciding to see how other's are doing it. this is so insightful how much little JavaScript you need to get things done. thanks for doing this, God bless you 🙏🏽
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!
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 :)
Saw this video on the same topic several months ago: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AZVAAydWTj4.html After watching Chris's video, it's obvious Chris's solution is 10x better. Again, great video. You nailed this one! 👏
Hey, thanks so much! I looked quickly and everything looked way over engineered, so I just came up with my own. Haha I’m sure there are ways to make it even better!
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?
I want more information on how to use this on a Wix website that I am creating. Ideally, I want to use this code on one page to display multiple before-and-after pictures. I have no experience in coding. Thank you.
Thank you for this! Just what I need and works great. I am wondering what the best way is to have it the full width of a page or content area? I tried playing with the CSS, but it does weird things to it. Thank you for any help!
This is great. My only issue is that on mobile (where most of my site users will be interacting with it) scrolling interferes with it. As in, when I am scrolling to this section, it is also moving the slider on the image. Is there a way to disable the image slider during scrolling? of make it so that a tap on the image doesn't do anything, only a horizontal drag does?
Hey! Sure, you could disable moving it on scroll using JS. As to the horizontal drag, you'd likely have to write your own element for this as that's the default behavior for our slider.
Thanks so much for this tutorial! I followed along and also referenced the source code, but for some reason am not able to have the slider button drag. The before and after image input is registered (the images change and are draggable), but the icon I’m using remains centered and unmoving. Do you know why this might be?
Love the tutorial but I have one issue when I've added the code into my Divi page. The foreground image zooms in and out when I move the slider handle, any ideas what code I could fix/add?
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 !
Thanks for the comment. I may need to see your code to be a help? Mind sharing it somehow? Feel free to email me and I'll get back if I have time. chris@codinginpublic.dev
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.
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 ?
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
Sure thing. Glad it was a help. You'd need to change the JS to loop over a series of sliders instead of the single one. You can do this with querySelectorAll and then select the class in question. Hard to explain in a comment, but hopefully that helps point you in the right direction. Like this: codepen.io/Coding-in-Public/pen/RwyxzGQ
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.
Thanks for the suggestion! I totally agree that starting from the beginning is usually best. I think this _might_ be the only one I've ever started with three blank files. I'm not totally sure why I did. I'd say 95% or so of my videos start with an empty directory, but I'll keep that in mind going forward. Thanks again!
I'll whip up an example here later today if I get a chance. You'd just need to change up the query selector for the container to be a querySelectorAll.
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??
Hey I tried adding this code to my website with an but the Iframe doesnt load on iphones or on safari do you know a fix for this I would really apreciate a response
@@CodinginPublic I use webflow its kinda hard to add it directly but I think apple is blocking 2nd hand website cookies thats why its not working but havent found a solution yet
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?
So glad it was a help! You should able to change the .image-container declaration to width: 100vw and height: 100vh; remove the aspect ratio. You may also need to throw an object-fit: cover on the image?
@@CodinginPublic Thank you so much for your response, your willingness to share your knowledge is amazing!, Thank you, it's almost there... the before image is scaling. I have the initial sider value of 100 instead of 50 because I want the user to pull the slider from the right. When I slide it the before image scales the image to the width of the position of the slider, instead of sticking to how it looks when first loaded.
Setting the image container height to 100% instead of vh seemed to correct the scaling issue, but now I have an ugly scroll bar., and overflow: hidden doesn't get rid of it. The journey continues.
@@CodinginPublic Thank you for your reply. The 100% height did the trick, and adding overflow to the CSS removed the unwanted scroll bar. Thank you so much for a fantastic tutorial and follow up with my questions.
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 ':)
Hi I can't believe it but I figured it out! First copy everything in case you mess up. Go to the bottom of the HTML column, put paste all the CSS stuff For the Java, go back to the HTML Column, paste the Java column Then delete everything in the CSS and Java columns and it should still be exactly the same!
Glad you enjoyed it! My usual theme is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5uETTXxVj8s.html but I was using something else here. I’ll track it down and comment here. And I use the Bearded Icons.
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.
@@CodinginPublic I had the same issue and then I realized that I referenced the js file in the header of the html file instead of just above the closing tag
Glad you enjoyed it! Hmm…not sure? If you have access to the code, I think you could mostly drop this into your liquid template file? But I wonder if Shopify doesn't already have an app that does this?
