Streaming live at 10am (PST)

A dynamic before and after slider!



After almost 4 hours of not knowing, I searched and searched and made this slider with codepen, then hacked away to make it dynamic.

Showcase page, feel free to clone
Share link: Here

I didn’t write the code, just edited it a little to change the “before” and “after” labels and added a function that allows multiple embeds on the same page. Also works on mobile.

Don’t forget the images need to be the same size. Use the links on the page to see other css tweaks you can do.

Thanks to other posts from @Waldo and @samliew on how to wrap the code properly, I managed to get it working.

How to create BEFORE/AFTER photo comparison with a interactive slider?
How do I call JSQuery on a container

Awesome thanks, for sharing.
Do you mind sharing the read only and maybe even make it possible to clone?


You’re welcome @jorn.

I struggled for a one page solution so thought I’d do one for anyone else and also for my future reference in case I forget! :smiley:

Edited the original message and put the links in.


Absolutely brilliant. Thanks for sharing that with us!


Really nice :+1:t2: It would be great if webflow would add something like this and other things to the components.


I just found out if you want the slider to be set at a different point, edit the bit that says .5 in the first line of the js script. .2 will make it start 20% from the left, while .7 will make it start 30% from the right. (or 70% from left)


20% from left using .2

70% from left using .7

@Pasint No problem. The way I see it, I’ve had so much help from these forums in the last 3 years, it would be rude not to share! :grinning:

@Maurice it would be nice, although I think this is quite a niche tool for Webflow to spend time developing. It’s really easy to install now all the code is there, and you can play with the css to style it.


Definitely :+1:t2: Hopefully @webflow will bring more components, so that you don´t have to implement scripts and custom code for something like this. Also a component that does the same thing like Full Page and so on. There would be so much potential for nice components, that allow faster working and results in better websites :smiley:


@markos84uk - thanks for this! Is there a way to use this code and not have it be dynamic? I’ll need to export the code and CMS items aren’t supported for exported code. Thanks!



Glad you like it!

Yes, just take the dynamic slug out and replace with the actual image location of where it’s stored.

You’ll of course do this for both images and don’t forget to make sure they’re the same dimensions.

Hope that helps. :grinning:



I was looking for something like this to use in my portfolio. Thanks a lot for sharing it. :slight_smile:


This is awesome!!! :smiley:


Hey Mark @markos84uk,

Your slider works wonderfully on a normal page, however when I try to add the collection list dynamically to a collection page template - the published site just shows a blank screen where the before / after section appears.

Do you know what maybe causing this?

Thanks in advance for your reply. :wink:



I can see where the problem is, but not sure how to solve this one…

There is an issue with the code when it’s placed onto a Dynamic Page. I’ve done a video to show the issue.

@samliew is this something you would be able to offer advice with?



Ah sorry @samliew, @exponent42 did share it but has since edited the post and removed it.

If you could share it your published url and share link please @exponent42 :+1:t2: