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

Design help Custom code
1

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)

2

Hi @Ratul_Bhowmik,

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

1 Like
3

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
4

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

1 Like
6

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
7

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
8

This should work

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

2 Likes
9

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.

10

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

11

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

15

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.

16

Wow! This is great, and simple. Thanks

17

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.

18

We dealt with this question in a client project and wrote a script that allows you to easily add a before/after photo slider to your project.

Here is a link to the tutorial video that walks you through the question, and then the solution from start to finish.

Please feel free to tag me if you have any questions!

Happy Thursday!

19

Try this:

This is a Before-After Slider is based on BeerSlider and well-optimized for Webflow. Perfectly responsive and fully flexible for further customization.

Touch friendly as well.

There are two parts of custom codes required, one part in the head code, and one part in the footer code. You can find them inside the page setting.

Cheers!

20

Hi,

This demo using GSAP and Draggable can come in handy:

1 Like