Automatic Any Image Comparison Slider In jQuery

Automatic Any Image Comparison Slider In jQuery
File Size: 21.3 KB
Views Total: 202
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple yet fully configurable jQuery plugin to create a horizontal or vertical slider that automatically slides left/right/up/down to compare the difference between before/after images.

More Features:

  • Configurable automatic animation.
  • Fully responsive and mobile friendly.
  • Custom cursor.
  • Custom background color.
  • Custom before/after label.
  • Also allows you to compare two images with mouse drag and/or movement.

How to use it:

1. Insert before/after images to the image comparison slider using the data-src attribute:

<div id="example">
  <div class="images">
    <div class="image-rgt" data-src="before.jpg"></div>
    <div class="image-lft" data-src="after.jpg"></div>
  </div>
</div>

2. Add OPTIONAL before/after labels to the image comparison slider.

<div id="example">
  <div class="images">
    <div class="image-rgt" data-src="before.jpg"></div>
    <div class="image-lft" data-src="after.jpg"></div>
  </div>
  <div class="ui">
    <a class="button-rgt" alt="full size image of 2020">2020</a>
    <a class="button-lft" alt="full size image of 2019">2019</a>
  </div>
</div>

3. Add an OPTIONAL drag handle.

<div id="example">
  <div class="images">
    <div class="image-rgt" data-src="before.jpg"></div>
    <div class="image-lft" data-src="after.jpg"></div>
  </div>
  <div class="ui">
    <a class="button-rgt" alt="full size image of 2020">2020</a>
    <a class="button-lft" alt="full size image of 2019">2019</a>
    <img class="dragger" src="./img/dragger-h.png" alt="dragger" width="84" height="48">
  </div>
</div>

4. Load the plugin's script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.anyimagecomparisonslider.min.js"></script>

5. Initialize the image comparison slider. That's it.

var mySlider = new AnyImageComparisonSlider(document.getElementById('example'));

6. Customize the image comparison slider with the following parameters:

var mySlider = new AnyImageComparisonSlider(document.getElementById('example'),{

    // or 'vertical'
    orientation: 'horizontal',

    // slider width
    width: '100%',

    // background color
    backgroundColor: 'none',

    // manually compare images with click and drag
    onPointerDown: 'false',

    // custom cursor on hover
    cursor: 'ew-resize',
    
    // customize the dividing line
    dividingLine: 'solid 1px rgba(255, 255, 255, .5)',

    // enable interactive 
    interactive: true,

    // config automatic animation
    autoAnimation: true,
    autoAnimationSpeed: 8,
    autoAnimationPause: 1,
    autoAnimationEasing: 'inOutCubic',

    // useful for multiple instances
    controlOthers: false,
    controlledByOthers: false,

    // slider group name
    group: ''
    
});

7. You're also allowed to pass the parameters to the image comparison slider via HTML data attributes::

<div id="example" 
     data-orientation="horizontal" 
     data-width="100%" 
     data-background-color="#000000" 
     data-on-pointer-down="false" 
     data-cursor="ew-resize" 
     data-dividing-line="solid 1px rgba(255, 255, 255, .5)" 
     data-interactive="true" 
     data-auto-animation="true" 
     data-auto-animation-speed="8" 
     data-auto-animation-pause="1" 
     data-auto-animation-easing="inOutCubic" 
     data-control-others="true" 
     data-controlled-by-others="true" 
     data-group="g1">
  <div class="images">
    <div class="image-rgt" data-src="before.jpg"></div>
    <div class="image-lft" data-src="after.jpg"></div>
  </div>
</div>

Changelog:

2020-06-12

  • Bugfix

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