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.
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)
@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!
@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 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
@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!
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.
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.
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:
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)