Before and After Image Slider in Webflow

Overview 📚

The Before & After Slider allows you to compare content side-by-side, either horizontally or vertically. This solution is built entirely using Webflow elements in the Designer, so you can fully customize it to match your preferences. The slider works by applying attributes to specific elements, making it robust, modular, and customizable.

You can implement the slider in two ways:

1. Use our free ‘Boosters’ app for a quick and hassle-free setup.
2. Clone the demo, or build it from scratch directly within Webflow.

Instructions ✍️

Option 1: Using the Booster App

The Booster app offers a user-friendly interface for adding components, customizing attributes and simplifying script installation and updates.

1. Install the app from the Webflow Marketplace.
2. Add the script to your project, or copy it and paste it manually

3. Add the component to your Webflow project and start customising the styles directly inside of Webflow.
4. Publish your site and enjoy a fully functional Before and After Image Slider.

Option 2: Build from Scratch

We’ll walk you through creating a horizontal slider similar to the one in the live preview. You’ll add the elements and attributes yourself, and the script will handle the functionality for you.

1. Add the Script

Copy and paste the script into your Project Settings, Page Settings, or an Embed Element on your page.

<script src="
https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-before-after-slider@1/dist/before-after-slider.min.js
"></script>

2. Add the Slider Wrapper

This will be the main container for all the slider elements, including images, the drag handle, and labels. To add this, drag a div-block to your page and add the attributes and styles as described below.

• Element: Div Block
• Styles:
  • position: relative
  • width: 100%
  • max-width: 600px (adjust as needed)
  • height: 400px (adjust as needed)
• Attributes:
  • fb-before-after: true
  • fb-before-after-direction: horizontal
  • fb-before-after-start: 50

3. Add Before & After Images

Inside the Slider Wrapper, add the images for comparison. For best results, ensure both images are exported at the same size. The Before & After image will need their own classes, as each of these elements have slightly different styles. If you're unsure of anything, make sure to check out our demos and examples linked above.

3.1. Before Image

• Element: Image
• Styles:
  • display: block
  • width: 100%
  • height: 100%
  • fit: cover‍
• Attributes:
  • No attribute needed

3.2. After Image

• Element: Image
• Styles:
  • display: block
  • margin-left: auto
  • width: 50%
  • height 100%
  • fit: cover
  • position: absolute
• Attributes:
  • fb-before-after-side = after

4. Add a drag handle (Optional)

To add a draggable handle, click on the BAS Wrapper, and add another nested div-block. Add the required styles below, and be sure to add a transform move property with a -50% value for the X & Y fields.

• Element: Div Block
• Styles:
  • width: 50px
  • height: 50px
  • position: absolute
  • z-index: 2
  • left: 50%
  • top: 50%
  • transform: translate(-50%, -50%)
• Attributes:
  • fb-before-after-handle = true

5. Add a divider line (Optional)

Add a line that divides your two images

• Element: Div Block
• Styles:
  • width: 2px
  • height: 100%
  • background-color: white
  • position: absolute
  • z-index: 1
  • left: 50%
  • top: 0px
  • bottom: 0px
  • transform: translate(-50%, 0)
• Attribute:
  • fb-before-after-line = true

6. Add Labels (Optional)

Add labels to indicate the “Before” and “After” sides of the slider. Clicking on these will reveal the full image.

6.1. Before Label

• Element: Text Block
• Styles:
  • background-color: white
  • position: absolute
  • left: 24px
  • top: 24px
• Attributes:
  • fb-before-after-label = before

6.2. After Label

• Element: Text Block
• Styles:
  • background-color: white
  • position: absolute
  • right: 24px
  • top: 24px
• Attributes:
  • fb-before-after-label = after

7. Publish & Test

Publish your site to test the slider. You should now be able to drag the After Image to reveal the Before Image.