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:
- Use our free ‘Boosters’ app for a quick and hassle-free setup.
- Clone the demo, or build it from scratch directly within Webflow.
Instructions ✍️
Option 1: Using the Booster App
Use the Webflow app to add the starter component to your project
- Install the app from the Webflow Marketplace.
- Add the script to your project, or copy it and paste it manually
- Add the component to your Webflow project and start customising the styles directly inside of Webflow.
- 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 elements and attributes, 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.
Before Image
- Element: Image
- Styles:
display: block
width: 100%
height: 100%
fit: cover
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
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
left: 50%
top: 50%
transform: translate(-50%, -50%)
- Attributes:
fb-before-after-handle: true
5. Add a divider line
Add a line that divides your two images, and connects with
- Element: Div Block
- Styles:
width: 4px
background-color: white
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)
4. Publish & Test
Publish your site to test the slider. You should now be able to drag the After Image to reveal the Before Image.
To make the interaction more intuitive, consider adding a drag handle, divider line, and labels.
4. Drag Handle, Divider Line, Labels
Publish your site to test the slider. You should now be able to drag the After Image to reveal the Before Image.
To make the interaction more intuitive, consider adding a drag handle, divider line, and labels.
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:
The second script should be added into your before </body> tag of the custom code:
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)