Before and After Image Slider for WPBakery Page Builder

Before & After Image Slider for WPBakery Page Builder

(formerly Visual Composer)
Before & After Image Slider for WPBakery Page Builder is a visual, responsive tool that’s perfect for showcasing comparison images. Now you can display before & after shots with lightning fast sliding effects.

 Choose Your Slider Position

Customize your Before & After slider by choosing from a variety of positions

Vertical

Angled (45 degrees)

Horizontal

Adjust Border Thickness

Control your slider’s border by adjusting its thickness, or remove the border altogether. You can change the border’s colors, too!

Thick Border

Thin Border

No Border

Choose Between Hover or Click-and-Drag Settings

Control how your site visitors navigate through your Before & After sliders

On Hover

Click-and-Drag

Optional Arrows

Spice up your slider by adding optional arrows on your borders

Cursor Options: Return VS No Return

Keep your slider’s border in its original position, or have it follow your cursor’s position throughout

Return

No Return

Optional Scrollbar

Add a fancy scrollbar to your Before & After Slider for an added kick

Right Position, 25% Starting Point

Bottom Position, 50% Starting Point

Mix & Match Your Chosen Settings

The slider is highly customizable and flexible too, allowing you combine your favorite effects together.

With Border, Slant/Angled, Click & Drag, Return, 50% Starting

No Border, Horizontal, Right Position Scrollbar, Hover, No Return, 75% Starting

With Arrows, Vertical, Hover, Return, 50% Starting

Shortcode for Non-WPBakery Page Builder Users

You can use the gambit_before_after shortcode on your own. Here’re the parameters for the shortcode.

Parameter Default Type Description
before_image_id number The attachment ID of the ‘before’ image
after_image_id number The attachment ID of the ‘after’ image
direction vertical string The slide direction, can be horizontal or vertical
start 0.5 number The starting point, in decimal percentage, of the comparison slider upon loading. The default is 50% (as .50), where the slider is positioned midway. Value should be between 0.0 to 1.0
angle 0 number A number in degrees that will determine the sliding angle. Minimum is -45 degrees, maximum value is 45 degrees. Maintain value at 0 for a strictly vertical or horizontal slide. Do not try beyond the minimum nor maximum value.
slide hover string Sliding behavior, values can be hover, click (for click and drag) and none (cannot be dragged)
return_on_idle false boolean Return the slider to its starting point after a specified idle period
return_on_idle_interval 5000 number Enter the delay, in milliseconds, before the slider reverts to its starting point once the focus is lost
return_on_idle_duration 1000 number How long will the animation take for it to go through the returning point? Enter the duration, in milliseconds

Arrow parameters

Parameter Default Type Description
arrows false boolean Use true if you want to display arrows
arrow_color #ffffff hex color The color of the arrow
arrow_gap 0 number The gap of the arrows from the split, in pixels
arrow_offset 0 number The vertical offset of the arrows, in pixels. Helpful making the arrows look good in tilted splits

Border parameters

Parameter Default Type Description
border false boolean Use true to display a border at the edge of the slider
border_width 2 number The width of the slider border, in pixels
border_color #ffffff hex color The color of the border of the slider

Scrollbar parameters

Parameter Default Type Description
scrollbar false boolean Use true to display a draggable scrollbar
scrollbar_pos top string The orientation / location of the scrollbar
scrollbar_color rgba(255,255,255,.3) color The color of the border of the scrollbar
scrollbar_thickness 8 number The thickness of the border of the scrollbar
scrollbar_button_color rgba(255,255,255,.8) color The color of the scrollbar button element
scrollbar_button_thickness 30 number The thickness of the scrollbar button element.