How to Build a Custom Before and After Slider in Webflow

Introduction to Image Comparison Sliders

A before and after slider is an essential UI component for industries that rely on visual transformation. From real estate staging and photo editing to web design redesigns, this interactive element allows users to take control of the comparison. In this tutorial, we will bypass complex interactions and use a lightweight, robust method called Beer Slider to ensure smooth performance across all devices.

Phase 1: Creating the Webflow Structure

The success of a slider depends on a precise CSS box model setup. We need to ensure that the images are perfectly stacked and that the "reveal" layer is masked correctly.

1. The Main Wrapper

Start by adding a Div Block to your page. This will act as the parent container for the entire component.

• Class Name: beer-slider
• Settings: Set this to position: relative and overflow: hidden.

2. The Base Image (Before)

Insert an Image element inside the beer-slider div. This image serves as the background layer.

• Class Name: beer-img
• Dimensions: Set the width to 100%.
• Pro Tip: In the Webflow settings panel, set a specific aspect ratio (like 16:9) and set Object Fit to Cover. This prevents the slider from shifting if your images have slightly different original dimensions.

3. The Reveal Container

Add a second Div Block inside the BE-Slider wrapper, placed after the first image.

• Class Name: beer-reveal
• Function: This div acts as a mask. The JavaScript will dynamically change the width of this container as the user drags the handle.

4. The Top Image (After)

Place your second Image element inside the be-reveal div.

• Class Name: beer-image (same as above)
• Consistency: It is critical to use the exact same class as the first image. This ensures both layers share the same height, width, and aspect ratio, creating a seamless "wipe" effect when the slider is moved.

Phase 2: Adding the Custom Code

Because this functionality relies on a specific script to track mouse and touch coordinates, we need to add a small snippet of JavaScript to the project.

The Script Implementation

Navigate to your Page Settings and scroll down to the Before  tag section. Paste the Beer Slider library script here (code found above). If you plan on using this slider on multiple pages (like a portfolio template), it is more efficient to place this code in your Global Site Settings.

Phase 3: Advanced Control with Data Attributes

For developers who need granular control over multiple sliders on a single page, the Beer Slider plugin supports Custom Data Attributes. This allows you to bypass global code settings for individual instances.

Customizing the Start Position

By default, the slider handle usually sits at the 50% mark. To change this:

1. Select the Beer Slider div block.
2. Open the Settings Panel (D).
3. Add a Custom Attribute.
4. Set the Name to data-start and the Value to your preferred percentage (e.g., 30 for a 30% reveal).

This is particularly useful if the most impactful part of your "After" image is located toward the edge of the frame.

Phase 4: Performance & UX Best Practices

• WebP Format: Always use WebP images for faster loading times. Large JPEGs can cause "stuttering" during the slider interaction.
• Touch Optimization: Ensure the Beer Slider container has enough vertical margin. This prevents mobile users from accidentally swiping the slider when they are trying to scroll down the page.
• Alt Text: Ensure both images have descriptive Alt Text. This improves accessibility and helps search engines understand the context of the comparison.