The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Compare two slides before and after with drag/reveal functionality

AddOns Requirements

Before/After is a Premium AddOn that requires Purchase Code Registration and Activation

Contents

1. View Switcher

Switch between modes when settings up your Before and After views

2. Module Settings

Icons
Divider Line
Animate
Drag Container

Arrow icons are available for the horizontal and vertical drag bars.  Click one of the icons to change it to another.

1. Icon Size
The font-size of the drag arrow icons.

2. Icon Spacing
The space between the drag arrow icons in pixels.

3. Icon Color
The drag arrow icons color.

4. Icon Shadow
Choose to add a CSS text-shadow to the drag arrow icons.

5. Shadow Blur
The blur value for the Icon Shadow.

6. Shadow Color
The color of the Icon Shadow.

1. Line Width
The width of the divider line in pixels.

2. Line Color
The color of the divider line.

3. Line Shadow
Add a CSS box-shadow to the divider line.

4. Shadow Blur
The blur value for the divider line shadow.

5. Shadow Color
The color of the divider line Shadow.

1. Animate on Stage Click
Automatically move the divider line view to the point wherever the Module is clicked.

2. Duration
The total time the click animation will take place in milliseconds.

3. Easing
The easing equation for the click animation.

4. Mouse Cursor
The CSS cursor to use when hovering the mouse over the Module.

1. Padding
Space for the drag arrows container.

2. Border Radius
A CSS border-radius for the drag arrows container.

3. BG Color
The background color for the drag arrows container.

4. Border
Add an optional border for the drag arrows container. 

5. Border Width
The border size for the drag arrows container.

6. Border Color
The color of the drag arrows container border.

7. Box Shadow
Add an optional CSS box-shadow to the drag arrows container.

8. Shadow Blur
The blur value for the drag arrows container box shadow.

9. Shadow Strength
The strength of the shadow for the drag arrows container box shadow.

10. Shadow Color
The color for the drag arrows container box shadow.

3. Slide Background

Set a Main Background for both the Before and After Views

4. Slide Settings

General Settings
Start/End Animation
Teaser Settings
Arrow Settings

1. Active
Enable the Before/After AddOn for the current Slide.

2. Direction
Choose if the views should be split side by side or on top of one another.

3. Init Split
The starting point of the Before/After view whenever the Slide is shown.

1. Delay
A delay in milliseconds before the Before/After views take their initial starting place.

2. Duration
The total time the initial animation will take place.

3. Easing
The easing equation for the initial animation.

4. Animation Out
Choose if the Before/After views should fade out or "collapse" (reverse the start animation) when the current Slide changes to the next.

Animate the arrows to give the user a hint that they can be dragged.

1. Teaser Animation
  • Infinite Loop
    Animate the arrows continuously.
  • On Initial Reveal
    Animate the arrows briefly when the Slide is first shown.
  • Until First Grab
    Animate the arrows until the user first interacts with the Before/After views.
2. Animation Type
Choose "Repel" or "Attract" to determine the bounce direction for the animation.

3. Distance
The amount of pixels to animate the Arrows away from each other.

4. Speed
The total time the animation will take place in milliseconds.

5. Easing
The easing equation for the animation.

6. Delay
A delay in milliseconds before the animation begins.

1. Arrow Transition
Enable a hover transition for the drag arrows on mouse-over.

2. Shift Offset
The amount of pixels to animate the Arrows away from each other.

3. Speed
The total time the animation will take place in milliseconds.

4. Easing
The easing equation for the animation.

5. Delay
A delay in milliseconds before the animation begins.

5. Layer Settings

Select a Layer on the editing Stage and choose if it should be place in the Before or After view.

Layers will then have a "B" (Before) or "A" (After) designation in the Timeline Editor, and the crossed-out eye icon will signal if the Layer is visible on the editing stage or not depending on the editing view.

Popular Solutions