SimpleSlider

jQuery plugin that provides a draggable slider to intuitively compare two images

Installation

Step 1: Link required files

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- jQuery UI Touch Punch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- SimpleSlider JS file -->
<link href="jquery.simple-slider.js" rel="stylesheet" />
<!-- SimpleSlider CSS file -->
<link href="simple-slider.css" rel="stylesheet" />

Step 2: Create HTML Markup

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

Step 3: Call SimpleSlider

$(document).ready( function() {
    $('#comparison').simpleSlider();
});