Horizontal/Vertical Image Comparison Slider - jQuery beforeAfter

A before/after image comparison jQuery plugin that creates a custom horizontal or vertical slider to compare two overlapping images for differences. 

How to use it:

1. Insert the before and after images into the comparison area.

<div id="demo">
  <div><img alt="before" src="before.jpg"></div>
  <div><img alt="after" src="after.jpg"></div>
</div>

2. Download and insert the JavaScript file beforeAfter.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/beforeAfter.js"></script>

3. Initialize the image comparison slider with default settings.

$('#demo').beforeAfter();

4. Customize the image comparison slider with the following options.

$('#demo').beforeAfter({

  // 'h': horizontal
  // 'v': vertical
  direction : "h",

  // auto returns to center
  returnToCenter : 'true',

  // background color/image of slider
  background: 'gray',

  // slider size
  barSize: 3,

  // start point
  start: 'center',

  // callback
  onReady: function(){}
  
});

---

This awesome jQuery plugin is developed by derickwelman. For more Advanced Usages, please check the demo page or visit the official website.