jQuery Before And After Image Slider Plugin - imgSlider

Just another jQuery plugin for creating a 'Before and After' slider which allows the visitor to compare two different images by mouse dragging.

See also:

• jQuery Plugin To Compare Two Images Via A Nice Interface - ClassyCompare
• jQuery Plugin For Comparing Images By Mouse Move - Comparison
• jQuery Before and After Image Comparison Plugin - Image Reveal
• jQuery Plugin To Compare Two Images For Differences - Covering Bad
• Stylish jQuery Images Comparison Plugin - twentytwenty

How to use it:

1. Include jQuery library together with jQuery imgSlider's CSS and JS files in your html document.

<link rel="stylesheet" href="css/imgslider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/imgslider.js"></script>

2. Insert the 'Before' and 'After' version of images into your document body as follows.

<div class="slider">
  <div class="left image"> <img src="before.jpg"/> </div>
  <div class="right image"> <img src="after.jpg"/> </div>
</div>

3. Initialize the plugin by simply calling the function on the parent element.

$('.slider').slider();

4. Default plugin options.

$('.slider').slider();

Change logs:

2016-08-25

• v2.2.0

2016-01-07

• Handle instructions better. 

2015-10-03

• fixed touch handling.

v1.2.1 (2015-01-28)

• Removed Jquery mobile dependency.
• Changing versions to fix processing error

2014-08-29

• added touch and swipe support

---

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