Streaming live at 10am (PST)

A dynamic before and after slider!


#1

Hello

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

http://magicslider.webflow.io

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
#2

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


#3

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.


#4

Absolutely brilliant. Thanks for sharing that with us!


#5

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


#6

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)

({default_offset_pct:.5,orientation

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.


#7

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:


#8

@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!


#9

@KPMT

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:


#10

@markos84uk

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


#11

This is awesome!!! :smiley: