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
INSTALL
Type:
Version:
<script src=" https://cdn.jsdelivr.net/npm/image-comparison@2.0.4/src/ImageComparison.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/image-comparison@2.0.4/src/ImageComparison.min.css " rel="stylesheet">
No default CSS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
Readme Files Statistics Browse CDN

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