How to Display Before & After Photos on your Webflow Site

Les registres des membres sont nécessaires

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

Tutoriel

Clonable

Click me

Pourquoi/Cas d'utilisation

- 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.

Si vous souhaitez utiliser notre projet de démonstration pour commencer, cliquez simplement sur le bouton ci-dessous pour l'ajouter à votre site Webflow.

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

Take me to cloneable!