Before/After Image Comparison Library – Comparimg

Category: Image , Javascript | March 21, 2016
Views Total:2,398 views
Official Page:Go to website
Last Update:March 21, 2016


Before/After Image Comparison Library – Comparimg


Comparimg is a JavaScript library for comparing before / after images with a horizontal or vertical slider handle.

How to use it:

Pug the Comparimg’s CSS file in the head section of the html page.

<link rel="stylesheet" href="comparimg.min.css">

Create a DIV element for the image comparison UI.

<div id="comparimg"></div>

Initialize the Comparimg and specify 2 different images you want to compare.

cmp = new Comparimg('#comparimg', ['before.jpg', 'after.jpg'],
        // options here

All available options.

  • position: Position of the slider
  • mode: horizontal|vertical
  • images: array with the path of te before and after images
  • move: Callback when move
  • change: Callback when move is completed

You Might Be Interested In:

Leave a Reply