Touch-friendly Image Comparison Slider With JavaScript

Category: Javascript | November 8, 2017
AuthorPaul-Browne
Last UpdateNovember 8, 2017
LicenseMIT
Views4,094 views
Touch-friendly Image Comparison Slider With JavaScript

A simple, responsive, mobile-friendly JavaScript image comparison plugin to compare before/after images with an image comparison slider that reacts to mouse drag and touch swipe.

How to use it:

Insert the image-comparison-slider.css and image-comparison-slider.js into the html document.

<link href="image-comparison-slider.css" rel="stylesheet">
<script src="image-comparison-slider.js"></script>

Create the html for the image comparison container and insert your own images as follows:

<div class="image-spliter">
  <div class="mover"></div>
  <img class="img-left" src="https://picsum.photos/600/450/?random">
  <img class="img-right" src="https://picsum.photos/g/600/400">
</div>

You Might Be Interested In:


Leave a Reply