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.
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’.
3 |
< div class = "image-rgt" data-src = "before.jpg" ></ div > |
4 |
< div class = "image-lft" data-src = "after.jpg" ></ div > |
2. Add OPTIONAL before/after labels to the image comparison slider.
03 |
< div class = "image-rgt" data-src = "before.jpg" ></ div > |
04 |
< div class = "image-lft" data-src = "after.jpg" ></ div > |
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 > |
3. Add an OPTIONAL drag handle.
03 |
< div class = "image-rgt" data-src = "before.jpg" ></ div > |
04 |
< div class = "image-lft" data-src = "after.jpg" ></ div > |
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" > |
4. Load the plugin’s script after jQuery.
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.
3 |
$( '#example' ).anyImageComparisonSlider(); |
6. Customize the image comparison slider with the following parameters:
01 |
var mySlider = new AnyImageComparisonSlider(document.getElementById( 'example' ),{ |
04 |
orientation: 'horizontal' , |
07 |
initialPosition: 0.00, |
13 |
backgroundColor: 'none' , |
16 |
onPointerDown: 'false' , |
22 |
dividingLine: 'solid 1px rgba(255, 255, 255, .5)' , |
25 |
followEasingFactor: 0, |
32 |
autoAnimationSpeed: 8, |
33 |
autoAnimationPause: 1, |
34 |
autoAnimationEasing: 'inOutCubic' , |
38 |
controlledByOthers: false , |
39 |
controlledByOthersReverse: false |
51 |
viewportOffset: '100px' , |
54 |
sleepMode: true Share this:
|