This time I will share jQuery Plugin and tutorial about jQuery Before And After Image Slider Plugin – imgSlider, hope it will help you in programming stack.
File Size: | 605 KB |
---|---|
Views Total: | 10717 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery plugin for creating a ‘Before and After’ slider which allows the visitor to compare two different images by mouse dragging.
How to use it:
1. Include jQuery library together with jQuery imgSlider‘s CSS and JS files in your html document.
1 |
< link rel = "stylesheet" href = "css/imgslider.css" > |
2 |
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></ script > |
3 |
< script src = "js/imgslider.js" ></ script > |
2. Insert the ‘Before’ and ‘After’ version of images into your document body as follows.
1 |
< div class = "slider" > |
2 |
< div class = "left image" > < img src = "before.jpg" /> </ div > |
3 |
< div class = "right image" > < img src = "after.jpg" /> </ div > |
4 |
</ div > |
3. Initialize the plugin by simply calling the function on the parent element.
1 |
$( '.slider' ).slider(); |
4. Default plugin options.
1 |
$( '.slider' ).slider(); |
Change logs:
2016-08-25
- v2.2.0
2016-01-07
- Handle instructions better.
2015-10-03
- fixed touch handling.
v1.2.1 (2015-01-28)
- Removed Jquery mobile dependency.
- Changing versions to fix processing error
2014-08-29
- added touch and swipe support
This awesome jQuery plugin is developed by kavyasukumar. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net