automatic image comparison slider - Free Download Automatic Any Image Comparison Slider In jQuery

Free Download Automatic Any Image Comparison Slider In jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Automatic Any Image Comparison Slider In jQuery, hope it will help you in programming stack.

automatic image comparison slider - Free Download Automatic Any Image Comparison Slider In jQuery
File Size: 4.17 MB
Views Total: 1292
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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’.

view source
1 <div id="example">
2   <div class="images">
3     <div class="image-rgt" data-src="before.jpg"></div>
4     <div class="image-lft" data-src="after.jpg"></div>
5   </div>
6 </div>

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

view source
01 <div id="example">
02   <div class="images">
03     <div class="image-rgt" data-src="before.jpg"></div>
04     <div class="image-lft" data-src="after.jpg"></div>
05   </div>
06   <div class="ui">
07     <a class="button-rgt" alt="full size image of 2020">2020</a>
08     <a class="button-lft" alt="full size image of 2019">2019</a>
09   </div>
10 </div>

3. Add an OPTIONAL drag handle.

view source
01 <div id="example">
02   <div class="images">
03     <div class="image-rgt" data-src="before.jpg"></div>
04     <div class="image-lft" data-src="after.jpg"></div>
05   </div>
06   <div class="ui">
07     <a class="button-rgt" alt="full size image of 2020">2020</a>
08     <a class="button-lft" alt="full size image of 2019">2019</a>
09     <img class="dragger" src="./img/dragger-h.png" alt="dragger" width="84" height="48">
10   </div>
11 </div>

4. Load the plugin’s script after jQuery.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/js/jquery.anyimagecomparisonslider.min.js"></script>

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

view source
1 var my<a href="https://www.jqueryscript.net/slider/">Slider</a> = new AnyImageComparisonSlider(document.getElementById('example'));
2 // or
3 $('#example').anyImageComparisonSlider();

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

view source
01 var mySlider = new AnyImageComparisonSlider(document.getElementById('example'),{
02  
03     // or 'vertical'
04     orientation: 'horizontal',
05  
06     // initial position
07     initialPosition: 0.00,
08  
09     // slider width
10     width: '100%',
11  
12     // background color
13     backgroundColor: 'none',
14  
15     // manually compare images with click and drag
16     onPointerDown: 'false',
17  
18     // custom cursor on hover
19     cursor: 'ew-resize',
20      
21     // customize the dividing line
22     dividingLine: 'solid 1px rgba(255, 255, 255, .5)',
23  
24     // you can enter values from 0 to 100 to control the easing
25     followEasingFactor: 0,
26  
27     // enable interactive
28     interactive: true,
29  
30     // config automatic animation
31     auto<a href="https://www.jqueryscript.net/animation/">Animation</a>: true,
32     autoAnimationSpeed: 8,
33     autoAnimationPause: 1,
34     autoAnimationEasing: 'inOutCubic',
35  
36     // useful for multiple instances
37     controlOthers: false,
38     controlledByOthers: false,
39     controlledByOthersReverse: false
40  
41     // slider group name
42     group: '',
43  
44     // synchronize your sliders
45     groupSync: false,
46  
47     // or 'eager'
48     loading: 'lazy',
49  
50     // offset in pixels
51     viewportOffset: '100px',
52  
53     // whether your slider should only be active/rendered if it is in the viewport
54     sleepMode: true

Share this:

Related posts: