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. |