Small jQuery Plugin For Image Comparison Slider

File Size: 391 KB
Views Total: 1444
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Small jQuery Plugin For Image Comparison Slider

A super tiny jQuery plugin for creating an image comparison slider which allows the visitor to compare before and after images with mouse interaction. 

How to use it:

1. Add references to jQuery library and the jQuery imageSlider plugin's JavaScript & stylesheet files.

<script src="//"></script>
<script src="js/jquery.imageSlider.js"></script>
<link rel="stylesheet" href="css/jquery.imageSlider.css">

2. Create an empty DIV element that will be served as the container for the image comparison slider.

<div class="image-slider"></div>

3. Call the plugin on the DIV element and specify the before / after images you want to compare. Note that the before / after images must have the save height and width.

  left: "before.png",
  right: "after.png"

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