Compare Images Side By Side - jQuery Before After Slider

Compare Images Side By Side - jQuery Before After Slider
File Size: 5.74 KB
Views Total: 1938
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.

Install it with NPM:

$ npm install before-after-slider --save

How to use it:

1. Create an empty container for the image comparison area.

<div id="slider">


2. Include the needed jQuery library and the jQuery Before After Slider plugin's script jquery-before-after-slider.min.js right before the closing body tag.

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

3. Set the before/after images, starting position, and width/height of the image comparison area as follows:

var config = {

    "width": "600px",
    "height": "450px",
    "start": "25%",
    "firstImage": "before.jpg",
    "secondImage": "after.jpg"


4. Initialize the image comparison slider and done.

$(document).ready(function() {


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