Image compare

viewer

A modern, lightweight comparison slider

Compare before and after images, for grading, CGI and other retouching comparisons. Vanilla Javascript.

npm install image-compare-viewer

Also available via CDN

JavaScript https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js

CSS https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css

Using WordPress?

Here's a ready-to-use WordPress plugin

Great customization options

How to use

HTML

Image Compare Viewer is easy to use. The HTML is as simple as adding two images into a containing parent. The parent will need an ID or class name (handy for multiple viewers on a single page).

<div id="image-compare">
  <img src="path/to/before.jpg" alt="" />
  <img src="path/to/after.jpg" alt="" />
</div>

CSS

If you're using NPM, the CSS is found at "node_modules/image-compare-viewer/src/styles/index.scss" or "node_modules/image-compare-viewer/dist/image-compare-viewer.min.css"

Javascript

Importing

import ImageCompare from "image-compare-viewer";

A single viewer?

1. Reference > 2. Mount...

const element = document.getElementById("image-compare");
  
const viewer = new ImageCompare(element).mount();

Multiple viewers?

1. Collect > 2. Loop > 3. Mount...

const viewers = document.querySelectorAll(".image-compare");
  
viewers.forEach((element) => {
  let view = new ImageCompare(element).mount();
});

Options

The options object below shows the defaults of all options. All options are used in the examples.

smoothing and smoothingAmount are currently set to automatically disable in Safari. This will remain until a browser bug is resolved.
...

const options = {

  // UI Theme Defaults

  controlColor: "#FFFFFF",
  controlShadow: true,
  addCircle: false,
  addCircleBlur: true,

  // Label Defaults

  showLabels: false,
  labelOptions: {
    before: 'Before',
    after: 'After',
    onHover: false
  },

  // Smoothing

  smoothing: true,
  smoothingAmount: 100,

  // Other options

  hoverStart: false,
  verticalMode: false,
  startingPoint: 50,
  fluidMode: false
};
  
// Add your options object as the second argument
const viewer = new ImageCompare(element, options).mount();

Examples

Default

UI Theme options

{
  controlColor: "#73c781",
  controlShadow: false,
  addCircle: true,
  addCircleBlur: true // default
}
Image Compare Viewer will keep all other elements in the container, as long as you add a keep class to it, allowing you to place other elements inside the viewer, just remember to set your z-index above 10, this example also uses the CSS property 'user-select: none'.

Two Bears

– Just add .keep class to keep elements inside –

Labels

{
showLabels: true,
labelOptions: {
  before: 'Clay',
  after: 'Final render',
  onHover: false // default
}
You can style these labels using .icv__label for both, and .icv__label-before, .icv__label-after for the individual labels.

Disable Smoothing

Smoothing is automatically disabled on touch enabled screens.

{
  smoothing: false
}

Increase Smoothing

Milliseconds – a higher number means more dampening

{
  smoothingAmount: 300
}

Start on hover

Clicking will activate manual control.

{
  hoverStart: true
}

Vertical Mode

Vertical mode is mobile friendly!
{
  verticalMode: true
}

Starting Point

The percentage to show of the before image.

{
  startingPoint: 75
}

Fluid mode

Fluid mode enables the container to have fluid height and width, independent of each other, useful for using Image Compare Viewer in a full screen container for instance. The image is dynamically cropped using the CSS background 'cover' property.

{
  fluidMode: true
}

While by default a viewers height is set by the image, you must set your own height when using fluid mode.

/* Example */
#image-compare {
  width: 100%;
  height: 66vh;
}
FLUID MODE