How to Create a Before/After Image Slider Using Elementor Containers

Most “Before/After” widgets are handle-draggers. Sometimes, you want a dramatic reveal where the entire “Before” image fades into the “After” image to show the full transformation.

To solve this, use Div Render Container Slider for Elementor.

Step 1: The Slides

Create two child containers.
– Slide 1: The “Before” image. Add a badge or heading saying “BEFORE”.
– Slide 2: The “After” image. Add a badge saying “AFTER”.

Step 2: Slider Settings

Enable Slider Mode.
Set Slides Per View to 1.
Set Effect to Fade.
Set Speed to 1500ms for a slow, dramatic reveal.

Step 3: Interaction

Enable Arrows.
Use Custom CSS to change the Arrow Label (if supported) or just rely on the user clicking “Next” to see the result.
Alternatively, enable Autoplay with a long delay so it cycles automatically.

Pro Tips for Reveals

• Alignment: Ensure both images are exactly the same size and perfectly aligned so the transition doesn’t jump.