Discussion on Before & After Image Slider for WPBakery Page Builder (formerly Visual Composer)


GambitTech supports this item


This author's response time can be up to 1 business day.

39 comments found.

Hi guys. Is there a way to globally overwrite the starting position of all sliders via CSS? Thank you!

This is not possible as each slider will depend on the shortcode. Forcing a CSS rule might cause deformities/misplaced content in the slider.


I am interested in buying your plugin but i would like to ask you firstly if I can have with it the same result as here: http://the7.dream-demo.com/shortcodes/1-shortcodes/before-after/ (Click & drag navigation).

Thanx in advance.

Here is the screenshot of how the Options look like: http://i.imgur.com/k1mIjdo.png

As for how it would appear, here is a sample (though you can also customize it):
Before: http://i.imgur.com/Jv8dRZO.jpg
After: http://i.imgur.com/kSpNkVK.png

The screenshots is straight from our Demo Sandbox. If you want to give our plugin a try, you can also go to our Demo Sandbox by going to Live Preview. Click on the Launch Demo to launch the sandbox.

I finally bought your plugin! Did you receive my first ticket at your support forum please?

Hi there! We just received and replied on your ticket. :)

Hello, I am trying to get your Before After Image Slider to work. It loads correctly on my post edit page with Visual Composer. It loads correctly when I preview it. However, the slider freezes after about 3 seconds. I’ve tried different browsers, I’ve tried deleting the cache. I’ve tried both the hover and drag settings for the slider. It freezes (stops responding) and it won’t work again until I refresh the page.

I need to get this working today and I know there are other before/after sliders out there, so I’d rather just get a refund please. I thought I’d try this one because it integrated into the VC editor but it keeps freezing and I have to find another solution immediately.

Thank you.

Do your page have any JS Errors by any chance? Also, are you using an AJAX loader in your site? If this might be the case, can you try adding this Custom JS and see if it works?

Here is the Custom JS: setTimeout( function() { jQuery(window).trigger('resize'); }, 400 );

If this doesn’t work, we’ll probably need to check your page.

As for the refunds, only Envato Market can handle this matter. And will only be granted if the plugin is proven to be broken. And ofcourse, we make sure that the plugin is working properly before we upload.


Did you receive my last email please regarding an issue I have with your plugin?

Hello there! Apologies, the reply was late due to fact that it was weekends. But just letting you know that we already sent you a reply around 4 days ago as well. :)



I would like to buy your plugin, but I saw that on touch devices I cannot scroll the page when i touch the images.

Is there a way to enable page scrolling vertical and enable image slider on horizontal so that can be used on mobile?

Please let me know,


Hello Andreas!

This is a default behavior of the slider where the page cannot scroll while touching the slider.Despite that, we’ll note this down as a suggestion.

Hey there, is it possible to use this plugin without the Visual Composer plugin?

You’re welcome. You can also try copying the shortcodes from the Launch Demo as well. They may come in handy for references. Have a nice day!

I had a problem in the old site and now I’m building it all over again and now I can’t find the image ID so I can’t use the plugin… where do I found the images ID?

You can find image IDs when you insert an image using Media Library. The image is usually labeled as: wp-image-XXXX which can be seen via Text Mode.


Dnn Purchased

Can you check my ticket please?

Hi we just replied on your ticket. Our developers are currently investigating on it further. We also sent our findings on the reply to let you know the details. :)

Is it possible to activate it as auto play slider. I mean like for it to show before photo and move to after photo as an automatic slider without being touched ?

Hello zconsulting! Currently, we don’t have an auto slider for this plugin. But I’ll note this down as a suggestion for possible new features. :)

Is it possible to have background on caption?

Currently, this can be possibly done by Custom CSS. Here is an example:

.image_before_content { background-color: white; }

.image_after_content { background-color: black; }

This will add a background color on your before and after image caption. :)

Hey! Can I use these in blog posts? I dont want it on my main site!

Before and After can be used pretty much in any Pages, Posts and Custom Post Types as long as it supports the shortcode. :)

How do I know if it can or not? I am just using a wordpress blog and when I put in the shortcode, there is just nothing in place.

You can add the shortcode as long as the page/post can render shortcodes. About your WordPress “Blog” do you meant something along the lines of Custom Post Type or a different version of WordPress? And is there any other plugin involve with it?

Eitherway, you can also test our sample shortcode here. Providing you should also fetch the image ID from your before and after image. :)

[before_after before_image_id="XXX" after_image_id="XXX" start=".60" angle="25" return_on_idle="true" arrows="true" arrow_color="#ffffff" arrow_gap="10" arrow_offset="10" border="true" border_width="5"]

I am having a similar issue. We add the shortcode (used our own and the one you provided), add the image ideas but nothing happens. The page has other shortcodes on for testing (a simple slider and photo gallery) so we know the shortcodes are being processed but cannot get B/A slider to show anything.

Thank you for getting back to me. The pages we have been creating only have the Before/After shortcode. We only added the other features to make sure the shortcodes were working. I have already submitted a ticket (prior to writing this comment) and waiting for your reply. The ticket included a sample page for your team to review along with other information like other plugins and theme used.

I just checked my Spam folder and found the response from the support team. Looks like it is a compatibility issue with BeTheme. They provided me a fix – implemented it and everything is working great.


You’re welcome. If you have any other question or concerns, please let us know. Have a nice day! :)


I am trying to load the plug-in on the demo site in the “live environment”. But there doesn’t seem to be a button to do this anymore. Have you removed this feature?

More specifically I am trying to find out have you got multiple slides functionality built in.

Hi Lisa! We just fixed the demo. It should be working properly now. :)

This Before and After Slider stopped being compatible with my Jupiter Wordpress Theme. The images just dont show up anymore on the front-end… QQ

Hello Luke! I’m very sorry for the late response due to holidays. :( By any chance, do you mean frontend editor of VC or when viewing your page? Normally, the plugin should work well. But there are instances where it might not as well. This includes if there’s an existing JS Error in the site or if there’s an AJAX transition that doesn’t call the plugin automatically in the page.

If this issue persists, we advice you to file a ticket in our Support Site, so we can assist you further. Providing us more details and a Sample Page will be very helpful as well. :)

I’m very interested in buy this plugin, however, I just want to know, how big can you make the side by comparisons?

Hello there! Before and After slider can be resized accordingly. This will depend on your container size. Given if you’re using a full-width and full-height sized row, then the Before and After Slider can do the same. :)

If you want to give our plugin a try, please go to our Live Preview. We do have a Launch Demo button which will also send you to our Backend Demo to test out the setup. :) and if you have any other question, do let us know! :)

Thanks for the replay, I bought the plugin I really like it

You’re welcome and thank you for purchasing our plugin!
If you need help, do let us know. We’ll be glad to help you! :)

Where is support? I’ve sent numerous emails over the past 8 days and I got one response about 7 days ago. The plugin does not work on my site. You gave me a different version to try and it too doesn’t work.

At that point I gave you the login and pass to my site about 7 days ago and you haven’t even had a look at it. I’ve missed my deadlines and told you that I was in a crunch but didn’t hear from you. Your plugin should work out of the box.

If it doesn’t work out of the box with the two latest wordpress releases then you should help those who purchase your plugin figure out why. You’ve gone completely absent and your plugin doesn’t work. How on Earth can you operate like this?

I’m really sorry about the difficulties. We want to let you know that we received and replied on your tickets. We do also suggest to check your spam folder as well just in case.

If you still haven’t receive any of our replies, please let me know. We can also help you from here.

Can I use your image comparison slider in “lightbox” mode? Either in a portfolio made by your company or another company?

I work in visual effects and I need to show before and after images – which your slider is ideal for! However, I also want to have a grid of thumbnails viewers can click on to navigate through a series of my full size images using a lightbox with arrows on the right and left to move between images quickly and easily.

I’m a newbie at all this web stuff, so I’m not sure if this is an easy thing to do or impossible. I should note that I’m using the “Brooklyn” Wordpress theme from United Themes (bought on Envato’s Themeforest).

Hello there, I’m sorry for the late response. Although, in order for the Before and After to work in a Lightbox, the lightbox plugin to be used should be able to support media aside images and is able to render shortcodes. :)

Although I’m sorry but we’re not able to see a plugin with such feature yet. I’ll note down this idea though. Maybe we can suggest this feature to our developers in the next updates.

Hello, the plugin works great, however, the arrows are far too small—is it possible to increase the size of the arrows? Thanks

Hi there! Currently, we only have 2 available sizes from the Before and After settings under Cosmetics tab.

If your want to add a customized size for the arrows, this can be done by a Custom CSS. Please have this as an example: .gambit_baa_arrow_svg { transform: scale(2, 2) !important; }
The scale can change the arrows height and width. If you want the size to apply only on specific Before and After sliders, you’ll need to use a Custom Class and specify it in your selector. :)

You can add the Custom CSS via Visual Composer from your page. If you want to know more how scale works, here’s a guide on how it works: https://www.w3schools.com/css/css3_2dtransforms.asp

If you need further help about this one, you can also send us a sample of your page.

Thank you for your reply, however, the custom CSS does not work. The arrows appear to be created by borders, not SVG.

I tried to increase the border-width, but doing so breaks the alignment and positioning of the arrows.

I think being able to control the size of the arrows is a necessary setting that you should consider adding in your next release. In the meantime, if you could help me out with increasing the size through CSS, it would be greatly appreciated.

The CSS works in our sandbox somehow. But since it doesn’t work in your end, we kindly ask you to file a Support Ticket at http://support.gambit.ph/ so we can help you further. We also kindly ask you to show us the page you’re working on, so we could see the CSS rules via browser inspector and to advice you what to do next. Thanks! :)


dsblue Purchased

I am embedding the output in an iframe on another page, and it always renders in low resolution. Why is that?

Hi there! The rendering of Before and After in iFrame will also depend on the iFrame’s container size. It will be likely render a lower resolution if the iframe only covers small area or the container inside the iframe was too small to render the Before and After.

If this problem persists despite the adjusting your container, we recommend you to file a ticket in the support site at http://support.gambit.ph/ and please provide us a sample so we can see the problem. Thanks!

Hi friend, a Cool plugin I have 1 question Quality of image on site or browser that works 100% but on mobile solution drop down about to 70%, can I adjust Quality?


Hi there! :) As far as the plugin versions concerned, the demo is still using an older version (We’ll request our developers to update it). The latest version should be using the full-size images on the mobile. If you have any other question or concerns, you can also contact us via support at http://support.gambit.ph/ so we can help you further. :)