A dynamic before and after slider!

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.

15 Likes

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

1 Like

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.

2 Likes

Absolutely brilliant. Thanks for sharing that with us!

1 Like

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

1 Like

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.

2 Likes

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:

1 Like

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

1 Like

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

@magicmark

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

1 Like

This is awesome!!! :smiley:

1 Like

Hey Mark @magicmark,

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:

@exponent42

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?

CloudApp

1 Like

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:

Yes, had the same question and I can’t find it. Some one knows the answer, please share

Hey @innes :wave:

Which question did you have as there were a few asked :slight_smile:

ow yes sorry, this one.

There seems to be a limitation when you add this on to a dynamic page. I’ve not been able to get this to work on dynamic pages unfortunately, only a static page, using dynamic data.

It seems it will require some coding expertise. If you want to share your read only link, you could leave it open so if anyone comes along they may be able to work a solution for this.

Sorry I couldn’t be more help with this one!

Yup, custom code is required to get before/after comparison tool working with the CMS.

Yes I know but some how it seems to be not working. I did some digging and the reason it colleps is becouse of this code:

The container collepse becous of the position absolute but it is nessesary so I gave the container a heigt of 600px and then the container stay’s open. But that is not the problem. Some how in the dinamic page, the jaquery code does not work. I whent to inspector in fire fox and this error came up:

and the syntaxError must be on this line:

but this is what bugs me because in a statick page, even with dynamic (or none dynamic content) there is no syntax error. So some thing about the dynamic page makes this code brake. And I tried some other code as wel then the twenty twenty code and the result is the same. I can fix the collapsing container but I can not fix de jaquery code that provides a slider, and the scaling of the immages. So I think I found a bug… can this be possible? In a minute I will share my work so that you can see what I mean. (and sorry for my bad englisch)