How to Display Before & After Photos on your Webflow Site
Memberscripts needed
https://www.memberstack.com/scripts/before-after-slider
Tutorial
Cloneable
Why/Use Cases
- Easily and elegantly showcase differences between two photos.
Displaying before & after photos on a Webflow site
You might sometimes want to add a before & after slider to showcase your work – or anything else, but implementing this functionality can often be tricky or just expensive.
However, it doesn’t have to be either; this guide will show you how to quickly add a simple before & after slider on your site.
To show before & after photos on your Webflow site, we’re going to use MemberScript #112 – Before & After Sliders. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
We’d normally go through all the steps to set everything up, but in this case, since there’s a lot of settings to fiddle with, it would be much easier to simply copy our demo project and add the ba_outer wrapper to your project – you can learn more about all the settings we applied from the video linked to above.
Once you’ve added that wrapper to your project, just go ahead and replace our photos with yours.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #112 custom code to your page, before the closing body tag.
If you want to change the style of the separator, you’ll see these lines in the custom code that allow you to adjust the width and color:
· slider.style.width = '4px';
· slider.style.background = 'white';
Conclusion
That’s everything, you can now go ahead and test the slider on your site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you add a before & after slider to your Webflow site.
Take me to cloneable!
Written by
Ovidiu
Contributor