Compare Images Side By Side - jQuery Before After Slider

A dead simple (less than 1kb) jQuery image comparison plugin compare before and after images with an interactive vertical slider that responds to mouse movement.

Install it with NPM:

# NPM
$ npm install before-after-slider --save

How to use it:

1. Create an empty container for the image comparison area.

<div id="slider">

</div>

2. Include the needed jQuery library and the jQuery Before After Slider plugin's script jquery-before-after-slider.min.js right before the closing body tag.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="jquery-before-after-slider.min.js"></script>

3. Set the before/after images, starting position, and width/height of the image comparison area as follows:

var config = {

    "width": "600px",
    "height": "450px",
    "start": "25%",
    "firstImage": "before.jpg",
    "secondImage": "after.jpg"

}

4. Initialize the image comparison slider and done.

$(document).ready(function() {

  $("#slider").hanBeforeAfterSlider(config);
  
});

---

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