search

maxulyanov / ImageComparison

Slider to quickly compare two images
https://m-ulyanov.github.io/image-comparison/
MIT License
59 stars 9 forks source link
compare compare-images css css3 dom es6 imagecomparison javascript plugin slide slider vanilla-js

readme

ImageComparison npm npm

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="https://github.com/maxulyanov/ImageComparison/blob/master/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