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

Preview:

Description:

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">
</div>

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')
mySlider.compare({
  direction: 'horizontal',
  animation: true,
  lineClassName: 'line',
  arrowClassName: 'dot'
})

6. Customize the image comparison slider in the CSS.

.dot{
  /* styles for drag handle */
}
.line{
  /* styles for slider */
}
.caption{
  /* styles for labels */
}