Accordion Style Image Comparison Plugin - jQuery sbs-slider

A small and user-friendly side-by-side image comparison plugin that allows the user to compare the difference between two images with cursor hover just like an accordion.

How to use it:

1. Insert the core Stylesheet sbs-slider.css into the document.

<link href="sbs-slider.css" rel="stylesheet" />

2. Insert before & after (left/right) images into the document.

<div class="img_sbs_box">
  <div class="imgwrapper imgleft">
    <img src="before.jpg" />
  </div>
  <div class="imgwrapper imgright">
    <img src="after.jpg" />
  </div>
</div>

3. Load both jQuery and the sbs-slider.js script at the end of the document.

<script src="/path/to/jquery.min.js"></script>
<script src="src/sbs-slider.js"></script>

4. Call the function on the top container to initialize the image comparison component.

$(function(){
  $('.img_sbs_box').sbsbox();
});

5. Adjust the animation speed as per your needs. Default: 250ms.

$('.img_sbs_box').sbsbox({
  aniSpeed: 500
});

6. Determine the initial position of the image comparsion slider. Default: 85%.

$('.img_sbs_box').sbsbox({
  showPcnt: 50 // center
});

---

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