Responsive Touch-friendly Image Comparison Plugin With jQuery - bgCompare.js

bgCompare.js is a responsive, mobile-friendly jQuery image comparison plugin which allows you to view before / after images with support for both mouse drag and touch movements.

How to use it:

1. Include the latest jQuery JavaScript library together with the jQuery bgCompare plugin's files on your html page.

<link href="css/bgCompare.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bgCompare.min.js"></script> 

2. Create a DIV container to hold your before / after images.

<div id="demo"></div>

3. Initialize the plugin and specify the path to your own before / after images.

bgCompare({
  beforeImage: "before.jpg",
  afterImage: "after.jpg",
  targetId: "demo"
});

4. Customize the image comparison slider.

bgCompare({

  // show before / after tooltips
  showTooltips: "yes",

  // before text
  txtBefore: "Before"

  // after text
  txtAfter: "After"

  // or "dark-theme"
  handleTheme: "light-theme",

  // initial position
  sliderPos: "15%"
  
});

5. Set the the size of the before / after images.

bgCompare({

  bgSize: "contain"

});

---

This awesome jQuery plugin is developed by theflupke. For more Advanced Usages, please check the demo page or visit the official website.