image-comparison-slider

Compare two images in a slider with mouse move effect

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