↔️ Compare Images Slider

A simple slider for comparing two images visually.

Features

• Lightweight
• Minimal DOM depth
• No dependencies
• Mobile friendly
• Vertical slider
• Inertia physics
• Bounce back
• Customizable via CSS

Demo

Check out the demo

Installation

npm install compare-images-slider

or use the CDN:

<script src="https://unpkg.com/compare-images-slider/dist/compare-images-slider.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/compare-images-slider/dist/compare-images-slider.min.css">

Usage

<div class="js-compare-images-slider compare-images-slider">
  <img src="img.jpg" alt="">
  <div class="frame">
    <img src="img-alt.jpg" alt="">
  </div>
  <span class="handle"></span>
</div>

⚠️ Note: Don't be lazy and please set the intrinsic dimensions of the images. This eliminates layout shifts and will ensure the slider works as expected.

import CompareImagesSlider from 'compare-images-slider';

const slider = document.querySelector('.js-compare-images-slider');
const compareImagesSlider = new CompareImagesSlider(slider);

If you are loading the script asynchronously, you can listen for the CompareImagesSliderLoaded event to initialize the slider:

document.addEventListener('CompareImagesSliderLoaded', function() {
  const slider = document.querySelector('.js-compare-images-slider');
  const compareImagesSlider = new CompareImagesSlider(slider);
});

@import 'node_modules/compare-images-slider/src/styles/index.scss';

Options

// Default options
const options = {
  inertia: false, // inertia physics, you can flick the handle
  friction: 0.9, // the friction of the inertia
  bounce: false, // will bounce back when intertia is enabled and the boundary is reached
  bounceFactor: 0.1, // the force of the bounce
  vertical: false, // vertical slider
  onlyHandle: true // only the handle is draggable
}

new CompareImagesSlider(slider, options);

Available attribute options:

• vertical - vertical slider or data-vertical

<div class="js-compare-images-slider compare-images-slider" vertical>
  <img src="img.jpg" alt="">
  <div class="frame">
    <img src="img-alt.jpg" alt="">
  </div>
  <span class="handle"></span>
</div>

TODO:

• [x] Add options
• [x] Scroll block on drag
• [x] Vertical option
• [ ] Add factory class, migrate the general factory class to the book of spells prior to that? Better turn this into custom element!
• [x] Refactor onDrag and move it to the book of spells
• [ ] Add initialized state, don't initialize twice

Made with ❤️ by @stamat.