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>
<div id="before-after-2" class="before-after">
</div>

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">
</div>