How to Display Before & After Photos on your Webflow Site

Ledenafschriften nodig

https://www.memberstack.com/scripts/before-after-slider

Les

Kloonbaar

Click me

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.

Het laten werken

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';

Conclusie

That’s everything, you can now go ahead and test the slider on your site.

Als u ons demoproject wilt gebruiken om u op weg te helpen, klikt u op de knop hieronder om het aan uw Webflow site toe te voegen.

Our demo can help you add a before & after slider to your Webflow site.

Take me to cloneable!