Compara Two Images For Differences - jQuery baSlider

Compara Two Images For Differences - jQuery baSlider

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

Supports both mouse drag and touch events.

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 class='after'>
        <img src='after.jpg' baSlider-image>

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

<script src="" 
<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.


4. Adjust the position of the handler.

  handler: {
    position: "auto",
    offsetX: 0,
    offsetY: 0

5. Set the height of the image comparison area.

  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
  imgHeight: "auto"

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

  • Publication date: 14.04.2018
  • Source