Smooth Image Comparison Slider In Pure JavaScript – ImageComparison

Preview:

Description:

Yet another JavaScript image comparison plugin that enables a custom slider to compare two overlapping images.

Install it via NPM:

$ npm install image-comparison

How to use it:

Load the ImageComparison’s JavaScript and CSS files in the html page.

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

Insert after/before images you want to compare into a container element.

<div class="js-comparison-container">
  <img class="comparison-image" src="before.jpg" alt="">
  <img class="comparison-image" src="after.jpg" alt="">
</div>

Initialize the image comparison slider as this:

new ImageComparison({ 
    container: containerSelector,
    data: [
      {
        image: images[0],
        label: 'before'
      },
      {
        image: images[1],
        label: 'after'
      }
    ],
});

Set the start position of the comparison slider.

new ImageComparison({ 
    container: containerSelector,
    startPosition: 50,
    data: [
      {
        image: images[0],
        label: 'before'
      },
      {
        image: images[1],
        label: 'after'
      }
    ],
});