Press "Enter" to skip to content

A Versatile Automatic Any Image Comparison Slider In jQuery

Any Image Comparison Slider is a versatile yet extremely slim slider for image comparison. You have a lot of options to configure the slider and it works almost everywhere.

An easy but totally configurable jQuery plugin to create a horizontal or vertical slider that robotically slides left/proper/up/all the way down to examine the distinction between earlier than/after photographs.

More Features:

  • Configurable computerized animation.
  • Fully responsive and cellular-pleasant.
  • Custom cursor.
  • Custom background coloration.
  • Custom earlier than/after label.
  • Also permits you to examine two photographs with mouse drag and/or motion.

How to make use of it

1. Insert earlier than/after photographs to the picture comparability slider utilizing 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 earlier than/after labels to the picture comparability 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 deal with.

<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 picture comparability slider.

var mySlider = new AnyImageComparisonSlider(document.getElementById('example'));
// or
$('#example').anyImageComparisonSlider();

6. Customize the picture comparability slider with the next parameters:

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

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

    // slider width
    width: '100%',

    // background coloration
    backgroundColor: 'none',

    // manually examine photographs with click on and drag
    onPointerDown: 'false',

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

    // you'll be able to enter values from Zero to 100 to manage the easing
    followEasingFactor: 0,

    // allow interactive 
    interactive: true,

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

    // helpful for a number of situations
    controlOthers: false,
    controlledByOthers: false,
    controlledByOthersReverse: false

    // slider group identify
    group: '',

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

7. You’re additionally allowed to cross the parameters to the picture comparability slider through HTML information 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 strategies.

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

// unpause
unpause();

// returns an array with all different sliders on the web page besides the one the strategy was referred to as from
getAllOthers();

// returns a string that signifies whether or not the slider is horizontal or vertical
getOrientation();

// returns a string with the id of the slider
getId();

Image Comparison Slider jQuery, Automatic Any Image Comparison Slider, Image Comparison Plugin/Github


See Demo And Download

Official Website(NiklasKnaack): Click Here

This superior jQuery/javascript plugin is developed by NiklasKnaack. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.