jQuery Before And After Image Slider Plugin - imgSlider

jQuery Before And After Image Slider Plugin - imgSlider
File Size: 605 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.