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