maxulyanov / ImageComparison

Slider to quickly compare two images

ImageComparison

Slider to quickly compare two images

Install

$ npm install image-comparison --save

Connection

JavaScript

CommonJS

import { ImageComparison } from 'image-comparison';

AMD

require(['ImageComparison'], function (ImageComparison) {
   // Usage
});

CSS

<link rel="stylesheet" href="node_modules/image-comparison/src/ImageComparison.css">

Usage

<script>
new ImageComparison({ 
  container: containerSelector,
  startPosition: 70,
  data: [
    {
      image: images[0],
      label: 'before'
    },
    {
      image: images[1],
      label: 'after'
    }
  ],
});
</script>

Options

Options list:

Name	Description
container	Dom element for initialization ImageComparison
startPosition	starting position in percentage
data	Array of objects, where each object: `{ image: dom element, label: 'before'}`

Browsers support

Chrome, FF, Opera, Safari, IE10+

Example

See example - ImageComparison