image-comparison-slider
Compare two images in a slider with mouse move effect
Last updated 3 years ago by guillaumedeplanque .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install image-comparison-slider 
SYNC missed versions from official npm registry.

image-comparison-slider

NPM

npm version Dependency Status devDependency Status License

Compare two images in a slider with mouse move effect

Two kittens !

Install

$ npm install image-comparison-slider

Usage

In your HTML file, create a block with the class "comparison-slider". Add two data-attributes :

  • data-image-width : the width of your two images
  • data-image-height : the height of your two images

Inside this block, add two divs like this :

<div class="comparison-slider" data-image-width=1157 data-image-height=851>
    <div class="before" style="background-image: url('img/before.jpg')"></div>
    <div class="after" style="background-image: url('img/after.jpg')"></div>
</div>

In your JS file, import the Comparison class & instantiate it :

import Comparison from 'image-comparison-slider';

const comparison = new Comparison();

Tadaaaaa ! Magic is done !

Demo mode

# Clone the repo
$ git clone https://github.com/guillaumedeplanque/image-comparison-slider.git

# Move into the repo
$ cd image-comparison-slider/

# Install dependencies
$ npm install

# Build assets for dev mode
$ npm run demo-build
# Build assets for production mode
$ npm run demo-build-prod

# Lauch the static server
$ node demo/server.js

Current Tags

  • 1.0.4                                ...           latest (3 years ago)

5 Versions

  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |