Before & After Slider

Before & After Slider compares two images with a draggable divider. Use it for before and after photos, product comparisons, or any two images that show a change.

How to add the Before & After Slider module

1. Add a section and row, then add the Before & After Slider module.
2. In the Before group, upload the first image. In the After group, upload the second image.
3. Set the labels and the starting position of the divider.

Content

Before

Open the module settings, go to the Content tab, and open the Before group.

• Image: The image shown on one side of the divider.
• Before Label: Default is Before.
• Label Background: Default #5b2cff.

After

• Image: The image shown on the other side of the divider.
• After Label: Default is After.
• Label Background: Default #5b2cff.

Settings

• Orientation: Horizontal (default) or Vertical.
• Handle Initial Offset: Where the divider starts, from 0.0 to 0.9. Default is 0.5.
• Move on Hover: Off by default. When on, the divider moves with the pointer.
• Use Overlay on Hover: On by default.
• Show Before/After Label: Always (default) or On Hover.

Design

Label

Go to the Design tab and open the Label group.

• Padding: Default 5px 20px.
• Height and Width
• Font settings and border settings for the labels.

Handle

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