How to create BEFORE/AFTER photo comparison with a interactive slider?

How to create this BEFORE/AFTER image view with a slider? Or do u guys think there can be a better way to showcase comparison photos. Optimal for mobile view.

image

To view the example interaction please visit this site and scroll down to ‘STUNNING HDR’ section


Here is my public share link: LINK
(how to access public share link)

Hi @Ratul_Bhowmik,

take a look at this forum post, this could be your solution:

1 Like

That’s the exact same function, its’ using the twenty-twenty script, except the label has been altered slightly @Ratul_Bhowmik

It’s really easy to implement into a webflow site, it’s copying and pasting some code. No code editing is necessary.

2 Likes

Found a pen for you https://codepen.io/oloman/pen/jPOvrY

1 Like

I’ve managed to do this effect in Webflow without using any code.
All made of divs and interactions.

Here is my public link. Feel free to clone:
https://preview.webflow.com/preview/before-and-after-b62255?preview=4a0d5f929f95c4991d40c4778c701f26

Live link:
http://before-and-after-b62255.webflow.io/

(inspired by Slava Fedosenko)

1 Like

Hi @Eli11 ,

thats looking awesome and is exactly what I need, but unfortunately your public link is not working.
Could you reshare this, please?

Best Maurice

1 Like

This should work

https://preview.webflow.com/preview/before-and-after-b62255?preview=b1fc13e79fb0d66901cf8a1141db6eca

2 Likes

This is really awesome, but does anyone know a way to inject this into perhaps the rich-text editor? I want to use something like this for a portfolio site, where the content is all being called via the CMS.

Then the only way is to use custom code. You can’t convert content within a rich-text editor into other components without JavaScript.

Has anyone got a step by step video or resource for creating this without using code? I have imported it into webflow but don’t quite get how its set up so am unable to replicate it at this stage.

Thanks very much

Is the cloneable file easily applied to CMS items? I can see this working really well for non CMS items, but im not sure exactly how I’d implement it into my CMS. Any pointers in how to do this? If its overly complicated then I may skip it.

Wow! This is great, and simple. Thanks

Ok, not as easy as first thought. I’m struggling to get the sizing right, i.e. I can’t scale the images down without messing things up.