https://github.com/maxulyanov/ImageComparison

Slider to quickly compare two images
https://github.com/maxulyanov/ImageComparison

compare compare-images css css3 dom es6 imagecomparison javascript plugin slide slider vanilla-js

Last synced: 2 months ago
JSON representation

Slider to quickly compare two images

• Host: GitHub
• URL: https://github.com/maxulyanov/ImageComparison
• Owner: maxulyanov
• License: mit
• Created: 2016-03-12T16:23:44.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-02T18:29:05.000Z (almost 8 years ago)
• Last Synced: 2024-10-22T23:46:42.606Z (3 months ago)
• Topics: compare, compare-images, css, css3, dom, es6, imagecomparison, javascript, plugin, slide, slider, vanilla-js
• Language: JavaScript
• Homepage: https://m-ulyanov.github.io/image-comparison/
• Size: 4.02 MB
• Stars: 59
• Watchers: 5
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
ImageComparison

[![npm](https://img.shields.io/npm/dt/image-comparison.svg)](https://www.npmjs.com/package/image-comparison)

[![npm](https://img.shields.io/npm/v/image-comparison.svg)](https://www.npmjs.com/package/image-comparison)

===============

Slider to quickly compare two images

## Install

```bash

$ npm install image-comparison --save

```

## Connection

### JavaScript

#### CommonJS

```js

import { ImageComparison } from 'image-comparison';

```

#### AMD

```js

require(['ImageComparison'], function (ImageComparison) {

   // Usage

});

```

### CSS

```html

```

## Usage

```html

new ImageComparison({ 

  container: containerSelector,

  startPosition: 70,

  data: [

    {

      image: images[0],

      label: 'before'

    },

    {

      image: images[1],

      label: 'after'

    }

  ],

});

```

## 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