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

Open the Visual Builder and add a section and row.
Search for "Advanced Before & After Slider" and add the module.
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.