jQuery Before And After Image Slider Plugin - imgSlider

File Size: 605 KB
Views Total: 12727
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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>

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


4. Default plugin options.


Change logs:


  • v2.2.0


  • Handle instructions better. 


  • fixed touch handling.

v1.2.1 (2015-01-28)

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


  • 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.