🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Image-Comparison

Documentation

JQuery slider plugin for "before vs after" comparison

see live example here: https://hanumanum.github.io/jquery-before-after-slider/index.html

JQuery slider plugin before vs after comparison

Installation

Step 1

Include jquery and plugin file

 <script src="node_modules/jquery/dist/jquery.js"></script>  <script src="jquery-before-after-slider.min.js"></script>

Step 2

Create wrapper for plugin

     <div id="slider">     </div>

Step 3

Configure plugin and run it

var config = {           "width": "700px",           "height": "600px",           "start": "25%",           "firstImage": "images/IMG_6474_1.jpg",           "secondImage": "images/IMG_6474_2.jpg"       }  $(document).ready(function() {     $("#slider").hanBeforeAfterSlider(config); });

You May Also Like