Vanilla JavaScript Image Comparison Plugin – BeforeAfterJs

Category: Image , Javascript , Recommended | February 10, 2016
Views Total:1,204 views
Official Page:Go to website
Last Update:February 10, 2016


Vanilla JavaScript Image Comparison Plugin – BeforeAfterJs


BeforeAfterJs is a simple, pure JavaScript image comparison plugin used to compare the difference between images with a smooth sliding effect.

How to use it:

Download the plugin and include the JavaScript file before-after.js in the document.

<script src="src/before-after.js"></script>

The html.

<div id="before-after-1" class="before-after">
<div id="before-after-2" class="before-after">

Initialize the plugin and specify the images you want to compare.

new beforeAfter({
  'elId'     : 'div-id-on-the-dom',
  'before'   : 'before.jpg',
  'after'    : 'after.jpg'

You can also wrap the before / after images into DIV element as follows.

<div class="before-after" data-before-after>
  <img src="before.jpg">
  <img src="after.jpg">

You Might Be Interested In:

Leave a Reply