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