Compare Before/After Images With Drag & Touch Events – iMatch.js

Category: Image , Javascript | December 21, 2020
Views Total:1,109 views
Official Page:Go to website
Last Update:December 21, 2020


Compare Before/After Images With Drag & Touch Events – iMatch.js


iMatch.js is a responsive, animated, mobile-friendly, highly customizable image comparison JavaScript library for both desktop and mobile.

It provides an elegant way to compare the difference between two images with either mouse drag or touch-swipe events.

More Features:

  • Horizontal Or Vertical slider.
  • Automatic image comparison.
  • Custom After/Before labels.
  • Easy to style using your own CSS.

How to use it:

1. Import the minified version of the iMatch.js JavaScript library.

<script src="./dist/imatch.min.js"></script>

2. Or import the iMatch.js as a component.

import  { iMatch } from '../dist/imatch.min.js'

3. Add before/after images to the iMatch container.

<div class="example">
  <img data-caption="Before" src="before.jpg" alt="image One">
  <img data-caption="After" src="before.jpg" alt="image Two">

4. Create a hidden range input to handle the oninput event.

<input hidden type="range" name="" id="range" min="0" max="100">

5. Initialize the image comparison slider. Possible parameters:

  • direction: Horizontal or Vertical
  • animation: Enable animation on init
  • lineClassName: CSS Class of image comparsion slider
  • arrowClassName: CSS Class of drag handle
var mySlider = new iMatch('.example'){
  direction: 'horizontal',
  animation: true,
  lineClassName: 'line',
  arrowClassName: 'dot'

6. Customize the image comparison slider in the CSS.

  /* styles for drag handle */
  /* styles for slider */
  /* styles for labels */

You Might Be Interested In:

Leave a Reply