Automatic Any Image Comparison Slider In jQuery

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.
• Image lazy loading.
• Renders the slider only if the images are in the viewport.

How to use it:

1. Insert before/after images to the image comparison slider using the data-src attribute. To auto-init the plugin, just replace the 'example' with ''aics-autostart'.

<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'));
// or
$('#example').anyImageComparisonSlider();

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

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

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

    // initial position
    initialPosition: 0.00,

    // 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)',

    // you can enter values from 0 to 100 to control the easing
    followEasingFactor: 0,

    // enable interactive 
    interactive: true,

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

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

    // slider group name
    group: '',

    // synchronize your sliders
    groupSync: false,

    // or 'eager'
    loading: 'lazy',

    // offset in pixels
    viewportOffset: '100px',

    // whether your slider should only be active/rendered if it is in the viewport
    sleepMode: true,

    // callback
    onReady: function(){}
    
});

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>

8. API methods.

// pause
$('#example').pause();

// resume
$('#example').unpause();

// returns an array with all other sliders on the page except the one the method was called from
$('#example').getAllOthers();

// returns a string that indicates whether the slider is horizontal or vertical
$('#example').getOrientation();

// returns a string with the id of the slider
$('#example').getId();

// returns a number that represents the percentage position of the slider
$('#example').getPos();

// checks if your slider is visible in the viewport
$('#example').intersectsViewport();

// controls the slider with another element like an input slide
$('#example').controlByExternalSource(control, position, maxValue);

Changelog:

2020-08-20

• added Auto Init feature

2020-08-19

• optimized attributes

020-08-18

• bugfix

2020-08-18

• bugfix

2020-08-17

• add new feature sleepMode & method intersectsViewport

2020-08-15

• optimize error handling

2020-08-08

• Removed unused codes.

2020-08-07

• Fixed bugs & added new events.

2020-08-06

• Fixed bugs & added new features

2020-08-05

• Added more features

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.