Image Comparison Slider - Before After Images Wordpress - Free HTML - No Plugins - No Codepen
HTML-код
- Опубликовано: 12 сен 2024
- Image Comparison Sliders can be done with lengthy Codepens or Plugins, but what about a really simple way of adding to any Wordpress Website without much effort?
Code: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
Image Comparison Slider - Before After Images Wordpress - Free HTML - No Plugins - No Codepen
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your RUclips Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
Love your channel. You're my guy!! Bought your company docs too. Good stuff!!
Amazing!
More and more we are getting the opportunity to reduce the amount of plugins needed and just stick with the basics.
Thanks, Mate
That's great!!!
And the community here is also great, I've been reading the comments for other use cases and wow!!
Very cool, thank you.
The only thing: I was missing the curser properties on mouseover. So I've implemented it:
Change the first line:
Extend the code:
.my-image-grab {
cursor: grab;
}
.my-image-grab:active {
cursor: grabbing;
}
😉 cheers
Thanks a bunch. Just used your code addition. Much appreciated!
Another day, another gem! Just implemented this on two of my pages, they look great, thanks again Imran!
how do you make your photos show up because for some reason mine did not
Great tip!
I would like to add something to this guide: use ACF image fields to set images.
I know, this adds a plugin, but being able to have different images for different posts can help.
To make this possible we need to install a plugin that allows the use of PHP code inside Elementor.
Now, copying the code into the PHP widget and replacing the image URLs with PHP code that returns the image URL:
// get the 2 ACF fields value
$before = get_field('before_img_id');
$after = get_field('after_img_id');
//replace in the html code the img src tag with this (before or after):
src=""
done!
You now have a template for single posts with parameterized images
Brilliant :)
That's cool!! , thanks
amazing. Thank you so much. I was facing lots of issues with elementor addons then I found your video. This is really fantastic. I'm so happy. Thank you again and again
Another great find ! Thanks for sharing with us 🍻
Great tip :)
This is so easy to use! thanks man!
Excellent!
Really cool thanks ! look likes it doesn't work on Adobe Portfolio website 😥
want to more this type video!
U didn't told, How to navigate the slider because I tried tooo long to figure out that the Slider slides with the Right Mouse button not the Left (Regularly Used).
I want to make it work with the Left Mouse Button, Could u please tell me is it possible by doing some changes in the linked Script?
tnx
Wow this is so cool!!!!
Told you !!!!!!!
Spent a week trying to find the best solution and I refined the code by adding the width and height to get around how one of my Page Speed Snippets affected it.
@@websquadron it always amazes me that you come up with this stuff! Loved this one so much tho and exactly what I was looking for without knowing it! I can't ever wrap my head around all the coding snippet stuff, thank god for code snippets plugin and ppl like you supplying us with the codes! 💛💛
Amazing keep it up, but it doesn't go for a full width with a parent container with 100% full width !!
No, that will need refining of the backend code.
Thxxx!
Greetings Imran.
Thank you for this! Is it possible to add some code to add a line of text to the image or would it be necessary to add it manually on the image?
Refined code for that from here: img-comparison-slider.sneas.io/examples.html
.before,
.after {
margin: 0;
}
.before figcaption,
.after figcaption {
background: #fff;
border: 1px solid #c0c0c0;
border-radius: 12px;
color: #2e3452;
opacity: 0.8;
padding: 12px;
position: absolute;
top: 50%;
transform: translateY(-50%);
line-height: 100%;
}
.before figcaption {
left: 12px;
}
.after figcaption {
right: 12px;
}
Before
After
@@websquadron Thanks again, you're a life (and time) saver!
Ah - one more thing:
I would recommend to store the linked js localy. Otherwise you've got a GDPR issue if you're located in europe.
Please make a tutorial about any content included (text, slider, and video ) before and after rather than the image.
Hi, can i use this in kajabi platform?
Because it’s just html code I would think so
Hi!
First, I have to say that everytime I search for some tutorial, I always hope it something you had made because your tutorials are always so perfect and easy to do! So... THANK YOU!
With my slider, I would need for it to have on each ''hidden'' side of the picture an hyperlink or a button. Im struggling to figure out where or how to place it. Do you have an easy solution for me? Im using Elementor Pro. I tried with the code you gave to BeppeRoncari, no luck. Maybe I'm blind, but I don't understand where to put the code?? I put the html code from your video in the HTML widget, but the code you shared to BeppeRoncari has html and css... So I don't know where to put it?? I tried in advance CSS within the HTML widget settings, and it's not working..
Thank you SO MUCH!!
I’ll double check on adding the html and css bit
Hey imran, just wanted to know if you have a video about a music chart list. I need something where i can add the top 40 songs of the week but i want to do it like a real music chart list. Any thoughts?
Love the vid btw. Very usefull
That would take some thought to feed through as an rss feed
Great Video. Thanks for your hard work. What is the site url for Image-Comparison-Slider please?
Hi
It’s in the code link - I added the url there
@@websquadron You’re awesome Thank you. I was referring to the website inside the video mentioned. It was Image-comparison-slider. I did see the code link. You mentioned checking out that site. (it had yellow logo?). Thank you.
@@TheExpressionTiger Yup, it's the video link :)
Sourced from:
img-comparison-slider.sneas.io/
@@websquadron Thank You!!! :)
anyone know how I can get it to optimize for desktop and mobile? I can only make one or the other look good right now since it's not built into shopify already
Depends on how you've built it.
HOW do you use it in Bricks? I'm trying with a code element inside a div, but it doesn't work.
I’ll try it out and confirm
@@websquadron Oh It's been 6 months since you're trying out. Hurry Up Man!
Hey Wait, Are you making a separate language for this script, Braaahhhh!!
Thanks a lot but I can't get the code from image comparison to work on WIX. Not sure if there are restriction as it's possible to embed your own code in WIX. It just shows 2 pictures on top of each other in and no slider. If anyone knows anything would be appreciated :)
I suspect that Wix may limit what you can do. Have you asked them?
@@websquadron Apologies I missed to copy the js file . I now copied the whole code you provided in video description and it works perfectly. Thanks a lot for your video I was searching for a long time for this slider since a lot are out there but obviously with a branding and you have to pay to remove it.
is it ok for pagespeed having to load js from other website ?
Yup, I tested and all was fine.
Сode works when you editing in the Elementor. But when you open the page in the browser, it just shows two pictures side by side. Does everyone have this problem or is it just me?
Have you inspected the page for any JS issues?
Works for me. Any JS optimisation applied?
why did my photos not show up
I don’t know
Noice!