How to add a Before and After Image Slider in Webflow

Overview 📚

The Before & After Slider (BAS) 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 a few different ways:

1. Clone the demo or copy component from Flowbase - no signup required.
2. Use our free Boosters app for a quick and hassle-free setup.
3. Build BAS from scratch directly within Webflow.

Instructions ✍️

Option 1: Clone or Copy from Flowbase

To quickly add a Before and After Slider, simply clone the project or visit Flowbase to copy-paste our prebuilt component into your project. This component has the structure, attributes and script all set up for you. All you need to do is click publish and view the live site to see your BAS in action!

Option 2: 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 3: 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

<!-- Flowbase Booster [Before & After Slider] -->
<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.