Modern Lightweight Image Comparison Slider – image-compare-viewer

Category: Image , Javascript , Recommended | May 30, 2020
Author:kylewetton
Views Total:374 views
Official Page:Go to website
Last Update:May 30, 2020
License:MIT

Preview:

Modern Lightweight Image Comparison Slider – image-compare-viewer

Description:

A modern, lightweight, mobile-compatible image comparison slider written in vanilla JavaScript.

Users are able to compare two images by clicking/tapping the before/after images or by dragging & swiping the slider.

Features:

  • Responsive design.
  • Touch-friendly.
  • Fluid mode to create a full-size image comparison viewer.
  • Supports both horizontal and vertical directions.
  • Smooth sliding.
  • Allows you to specify the starting point on init.

How to use it:

1. Install & download the library.

# NPM
$ npm install image-compare-viewer --save

2. Wrap your before/after images into a container element.

<div id="example">
  <img src="before.jpg" alt="BEFORE" />
  <img src="after.jpg" alt="AFTER" />
</div>

3. Load the image-compare-viewer’s files in the HTML.

<link href="dist/image-compare-viewer.min.css" rel="stylesheet" />
<script src="dist/image-compare-viewer.min.js"></script>

4. Initialize the image comparison slider. That’s it.

const element = document.getElementById("example");
const myViewer = new ImageCompare(element).mount();

5. Create a vertical image comparison slider.

const myViewer = new ImageCompare(element,{
      verticalMode: false
})
.mount();

6. Enable the Fluid mode to create a full-size image comparison slider.

const myViewer = new ImageCompare(element,{
      fluidMode: true
})
.mount();

7. Determine the starting point. Default: 50 (50%).

const myViewer = new ImageCompare(element,{
      startingPoint: 75
})
.mount();

8. Determine whether to allow the user to compare before/after images with mouse hover. Default: false.

const myViewer = new ImageCompare(element,{
      hoverStart: true
})
.mount();

9. Enable/disable the smooth sliding effect after dragging the slider. Default: true.

const myViewer = new ImageCompare(element,{
      smoothing: true,
      smoothingAmount: 100
})
.mount();

10. Customize the appearance of the slider.

const myViewer = new ImageCompare(element,{
      controlColor: "#FFFFFF",
      controlShadow: true,
      addCircle: false,
      addCircleBlur: true
})
.mount();

Changelog:

v1.4.0 (05/09/2020)

  • mobile events connected to controller only

v1.3.5 (05/09/2020)

  • User select on body and persistance fix

v1.3 (05/02/2020)

  • Bugs fixed

You Might Be Interested In:


Leave a Reply