Articles
February 26, 2023

Set custom shortcuts in Webflow

Learn how to set custom shortcuts and keybinds inside of the Webflow designer.

Back to Blogs

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

Use the Webflow app to add the starter component to your project

  1. Install the app from the Webflow Marketplace.
  2. Add the script to your project, or copy it and paste it manually
  1. Add the component to your Webflow project and start customising the styles directly inside of Webflow.
  2. 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:

<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet" type="text/css" />

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

<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>
<script>
// Wait for the page to load
$(document).ready(function () {
// Select all elements with the class "image-wrapper" and loop through them
const imageWrappers = document.getElementsByClassName("image-wrapper");
for(const imageWrapper of imageWrappers){
// Get the source of the first and second image within the current "image-wrapper" element
const firstImage = imageWrapper.querySelectorAll('img')[0].src;
const secondImage = imageWrapper.querySelectorAll('img')[1].src;
// Create a template for the beer slider using the first and second image sources
const template = `
<div class="beer-slider" data-beer-label="before">
<img src="${firstImage}">
<div class="beer-reveal" data-beer-label="after">
<img src="${secondImage}">
</div>
</div>
`;
// Remove the first and second images
imageWrapper.querySelectorAll('img')[1].remove();
imageWrapper.querySelectorAll('img')[0].remove();
// Append the template to the current "image-wrapper" element
imageWrapper.insertAdjacentHTML('afterbegin',template);
}
// Select all elements with the class "beer-slider" and loop through them
const beerSliders = document.getElementsByClassName("beer-slider");
for(const beerSlider of beerSliders){
// Initialize the BeerSlider plugin on the current element, passing in the "start" data attribute as the option
new BeerSlider(beerSlider, { start: beerSlider.dataset.start });
}
});
</script>
<style>
.beer-slider {
height: 100% !important;
}
.beer-slider,
.beer-slider>img {
width: 100% !important;
}
.beer-range::-webkit-slider-thumb {
-webkit-appearance: auto;
}
</style>

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)