Create Stunning Before and After Image Sliders for Your Website

Create Before & After Slider

* No credit card required

Common Ninja - Before & After Slider Widget

Compatible with all site builders, e-commerce platforms, and websites


(and any website you could think of)

Why Use Before & After Slider?

Highlight the difference between two images
Showcase your offers
Increase engagement on your website
Add multiple sliders

Add multiple sliders

Easily add several Before & After image sliders to the same page in your website.

Engage your users

A great way to engage your site visitors with interesting content.

Engage your users

Advanced Features

Control the slider effects
Control the slider ratio
Full RTL support
Full RTL support
Custom CSS
Custom CSS
Built-in analytics
Built-in analytics

Embed once in your website

Copy a single line of code to any platform or website. The widget will update automatically after every change you make.

Embed once in your website

Why use our plugins

  • Quick, easy, affordable

  • Fully customizable

  • Built-in analytics

  • No coding skills required

  • Fully responsive

  • Secured & GDPR Compliant

Trusted by

BillboardCNBCUS SoccerBarstool SportsChicago Field MuseumACS PublicationsWSBTVHamburg European OpenKSL SportsSpeed51Trout Unlimited

and many more!


This plugin is new in our growing collection

Be the first to use and review it to help Common Ninja’s community

Create Before & After SliderBackground image 2Background image 3


What is a before and after slider?

The before and after plugin allows you to effortlessly compare two images or any kind of content with the help of multiple modes. These widgets can help you highlight differences in the products or services you are offering.

Before and after sliders can give your website a high-end professional look that visitors will most definitely appreciate. You can present anything between products, services, or the result from the both. Businesses tend to use before and after plugins and extensions because of the many benefits that come after they’re up on a website.

How to create a before and after slider?

To create a before and after on your website, you should have an existing or create a new account. Once you’re logged in, go on the Plugin’s page and click the “Create'' button to enter the editor. On the left panel of the page you’ll find the options to customize the Plugin’s content and settings.Additionally, Common Ninja will automatically update the plugin after any change you make on your website.

Once you go through the steps, you’re ready to integrate a highly-responsive and interactive before and after widget.

How to add a before and after slider to my website?

Once you’ve fully customized the plugin, adding it to your website is a piece of cake!

Enter the editor and find the “Add to Website” button on the left panel of the page. There, you’ll see the Installation Guide area. Once you see the line of code, copy it by clicking the green button on the top right corner.

The next step is adding the copied script on your website. On the website building platform you’re using, find the HTML widget, plugin, or editor. Once you’re there, paste the copied script code and you’re all set.

Whatever changes you make, the plugin will update automatically on your website.

If you want to display multiple before and after sliders, the steps are also quite easy. First, enter the “Content tab” in the editor. Once you’re there, find the green “+” button and click on it. Another way to achieve this is by clicking the “add a slider” button on the bottom of the page.

Why do you need a before and after?

A responsive, interactive, and mobile friendly before and after extension on your website can help your business immensely.

You can expect the following benefits:

  • Increased revenue;
  • Increased retention;
  • Boost in engagement;

Increased trust in customers.

If you’re looking to showcase how your product or service stands out among the masses - a before and after plugin can save you a lot of time, energy, and resources.

Need Help? We've Got Your Back

Our help center is available 24/7, with live chat, detailed tutorials and an active community.

Create your first slider, it’s easy and FREE!

* No credit card required