Multi-image Comparison Plugin For jQuery - mbac.js

mbac.js is a fancy image comparison jQuery plugin which enables you to compare the differences between multiple images on hover. Useful for multiple before and after images.

How to use it:

1. Insert jQuery JavaScript library and the plugin's files into the html file.

<link rel="stylesheet" href="mbac.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="mbac.js"></script>

2. Create a list of images you want to compare.

<div class="mbac-wrap">
  <ul class="mbac">
    <li><img src="1.jpg" alt="Alt 1"></li>
    <li><img src="2.jpg" alt="Alt 2"></li>
    <li><img src="3.jpg" alt="Alt 3"></li>
    <li><img src="4.jpg" alt="Alt 4"></li>
  </ul>
</div>

3. Call the function on the top container. Done.

$(document).ready(function(){
  $('.mbac-wrap').mbac();
});

4. Possible plugin to customize the image comparison plugin.

$(document).ready(function(){
  $('.mbac-wrap').mbac({
    width: _width,
    height: "auto",

    animduration: 450, // length of transition
    animspeed: 4000, // delay between transitions
    target: "ul.mbac",
    z_index: 500,
    responsive: false
  });
});

---

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