NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

Divi 5 Ready

Sign in

Get Supreme Bundle
Previous: Animated Headline Module

Module 4 of 71

Next: Blob Image Module
Before After Slider module

Divi Before After Slider that shows the difference.

Compare two images in Divi 5 with a draggable divider. Go horizontal or vertical, set where it starts, add labels and style the handle.

Get Divi Supreme ProOpen the playground
Lake, black and white Lake, colour

Drag the handle, or use the arrow keys

What is the Divi Before After Slider module?

Before After Slider is a Divi 5 module in Divi Supreme Pro that stacks two images and lets visitors drag a divider to compare them. It is built for photo retouching, renovations, product edits, cleaning and landscaping results.

Each image keeps its own alt and title text, so both stay readable for search engines and screen readers. The divider works with a mouse, touch and the keyboard.

orientations

label positions

max smoothing

custom CSS

Start from a Before After Slider recipe.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Try every Before After Slider setting.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Everything Before After Slider can do.

Updated in v5.0.83

Horizontal or vertical

Compare side by side or top to bottom.

Choose where it starts

Set how much of the before image shows on load, from 0 to 100%.

Labels your way

Rename them, hide them, show them on hover and align them.

Drag or hover

Move the divider on hover, with optional smoothing up to 2 seconds.

Custom handle

Circular handle, backdrop blur and a drop shadow for busy photos.

Divi 5 native, WPML ready

Fluid Mode for responsive layouts, translatable labels and alt text.

Before After Slider documentation

Setup for Divi 5: images, labels, orientation, offset and handle styles.

Read the guide

Need help? Contact support

Questions about Before After Slider.

Does the before and after slider work on phones?

Yes. Visitors drag the divider with a finger, and the page still scrolls up and down normally.

Can I compare images top to bottom?

Yes. Set Orientation to Vertical. The divider then moves up and down, and Label alignment switches to Left, Center and Right.

How do I choose where the divider starts?

Set Default Offset Percentage from 0 to 1. The default 0.5 shows half of each image.

Can the divider follow the mouse?

Yes. Turn on Move Slider on Hover. Smoothing is on by default at 100 ms, and you can raise Smoothing Amount up to 2000 ms for a softer glide.

Can I hide or rename the Before and After labels?

Yes. Change Before Label Text and After Label Text, turn on Hide Labels, or use Show Labels on Hover so they appear only when visitors hover.

Can I change how the handle looks?

Yes. Circular Handle, Circular Handle Blur and Handle Shadow are all on by default. Turn any of them off for a plain line.

Does it work with Divi 5 and WPML?

Yes. It is a native Divi 5 module, and the images, alt text and labels can be translated with WPML.

Next module, A to Z

Blob Image Module

Related modules

Image Reveal Module

Reveal an image with a colour wipe on scroll.

Image Hover Reveal Module

Show a second image when visitors hover.

Scroll Image Module

Scroll a tall screenshot inside a frame.

4.9 out of 5

Rated 4.9 by Divi designers on Trustpilot. Running on 350,000+ sites.

Read reviews →

Show the difference in Divi 5.

Before After Slider comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.

Get Divi Supreme ProSee all modules
Divi Supreme