Compara Two Images For Differences - jQuery baSlider

The baSlider jQuery image comparison plugin creates a draggable, responsive, mobile-friendly, horizontal/vertical handler to compare two images for differences on the client side.

Supports both mouse drag and touch events.

How to use it:

1. Add the handler image and after/before images to the webpage.

<div class='baSlider'>
  <div class='frame'>
    <div baSlider-handler><img src="drag.svg" alt=""></div>
    <div class='before'>
      <img src='before.jpg' baSlider-image>
    </div>
    <div class='after'>
      <div>
        <img src='after.jpg' baSlider-image>
      </div>
    </div>
  </div>
</div>

2. Add jQuery library together with the jQuery baSlider plugin's JavaScript and Stylesheet to the page.

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

3. Call the function with default settings on the top container. Done.

$('.baSlider').baSlider();

4. Adjust the position of the handler.

$('.baSlider').baSlider({
  handler: {
    position: "auto",
    offsetX: 0,
    offsetY: 0
  }
});

5. Set the height of the image comparison area.

$('.baSlider').baSlider({
  height: "auto"
});

6. Set the height of before/after images. Available options:

• auto - gets the height of images
• frame - sets the height of images relative to height frame
• value - defined value

$('.baSlider').baSlider({
  imgHeight: "auto"
});

7. Set the alignment of the handler.

$('.baSlider').baSlider({
  /**
  * align of scroll
  */
  align: "horizontal",
  
  /**
  * place of dividing the photo horizontally & vertically
  */
  start: {
    horizontal: "50%",
    vertical: "50%"
  }
});

8. Decide whether to reset the handler position.

$('.baSlider').baSlider({
  reverse: true,
});

Change log:

2018-04-15

• Added animations to the handler.
• Added reverse option

---

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