---
title: "Advanced Before & After Slider"
url: "https://divitorque.com/docs/advanced-compare-image.md"
canonical: "https://divitorque.com/docs/advanced-compare-image/"
published: "2026-09-29"
modified: "2026-09-29"
author: "Fahim Reza"
tags:
  - "Modules"
---

# Advanced Before & After Slider

Advanced Before & After Slider places two images on top of each other and lets visitors drag a handle to reveal one or the other. Its one job is showing a before and after comparison.

## How to add the Advanced Before & After Slider module

1. Open the Visual Builder and add a section and row.
2. Search for "Advanced Before & After Slider" and add the module.
3. Upload the Before image and the After image in the Content tab.

## Content

### Before group

- **Image:** The before image.
- **Before Label:** Default "Before".
- **Label Background:** Default #5b2cff.

### After group

- **Image:** The after image.
- **After Label:** Default "After".
- **Label Background:** Default #5b2cff.

### Settings group

- **Orientation:** Horizontal (default) or Vertical.
- **Handle Initial Offset:** A value from 0.0 to 0.9. Default is 0.5, which starts the handle in the middle.
- **Move on Hover:** Off by default. Moves the handle as the pointer moves over the images.
- **Use Overlay on Hover:** On by default.
- **Show Before/After Label:** Always (default) or On Hover.

## Design

### Label group

- **Font settings** for the label text.
- **Padding:** Default 5px top and bottom, 20px left and right.
- **Height** and **Width:** Optional sizes for the label.

### Handle group

- **Handle Style:** Style 1 (default) or Style 2.
- **Handle Color:** Default #ffffff.
- **Arrow Color:** Default #ffffff.

## FAQ

### Why does my slider show nothing on the front end?

The module renders only when the Before image is set. Upload the Before image first.

### Does Advanced Before & After Slider work in Divi 4 and Divi 5?

The plugin includes a Divi 4 version and a native Divi 5 module with the same name. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.

### Are the labels used as image alt text?

Yes. The Before Label and After Label values are also written as the alt text of the two images.

### Does it load scripts on every page?

No. The slider scripts are enqueued when the module renders with a Before image.