Back to Blog

Before and After Image Slider in Webflow

Add a slider to compare your images side by side. Easily added into webflow and perfect to compare before and after images.

{{ Template "copy-button" "id:extension-image-comparison" }}

Overview 📚

Add this simple js based slider that lets you compare two images side by side. Learn more about it at github.com/pehaa/beerslider


To add this into your project, follow the simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:Inside <head> tag" "id:b29374ffc5fd28c6db0527a65f84c511" }}
{{ Template "gist" "text:Before </body> tag" "id:238a7ee80c049fd832f087f8fcbc460b" }}

Instructions ✍️

1. Add a <div block> for your 'Image Wrapper' class

Add a div-block to your page and give it the class 'Image Wrapper' - this is what will act as the parent for our images and we can use it to set max widths, heights and all the sizing approaches we require. Inside of this is where we are going to add our two images.

2. Add your two images inside of the <Image Wrapper>

Inside of your Image Wrapper div block, you should add two images with the class names 'Image One' & 'Image Two'. We recommend that you export these two images at the same size, but the script will work to make any image sizes work. If alignment is important, be sure that you export images at the same size.

3. Add custom code from page settings

Navigate to the page settings and make sure that you have added all the required custom code into your page before publishing.

The first script should be added into your <head> tag of the custom code:

{{ Template "gist" "text:Inside <head> tag" "id:b29374ffc5fd28c6db0527a65f84c511" }}

The second script should be added into your before </body> tag of the custom code:

{{ Template "gist" "text:Before </body> tag" "id:238a7ee80c049fd832f087f8fcbc460b" }}

4. Publish and Slide

Once you have added the scripts you can publish your site and check to see it has worked. If you have any issues please ensure that your class names match exactly with the custom code and as shown in our component example (Grab it at the top of this guide)

OTHER GUIDES & LESSONS

Boost your webflow site further.

Join Over 30,000
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 30,000+ other creators across our communities.