image-comparison

M-Ulyanov
js Styles
image-comparison JS library on GitHub image-comparison JS library on npm Download image-comparison JS library

Slider to quickly compare two images

Version 2.0.4 License MIT
image-comparison has no homepage
image-comparison JS library on GitHub
image-comparison JS library on npm
Download image-comparison JS library
Keywords
image comparisonimage sliderphoto comparisontwo imageimage javascript plugin

ImageComparison npm npm

Slider to quickly compare two images

Install

$ npm install image-comparison

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