Simple Automatic Image Scroller with jQuery - ImageScroll
| File Size: | 4.55 KB |
|---|---|
| Views Total: | 18188 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
ImageScroll is a very small jQuery plugin which allows you to scroll through a list of images at a certain speed like a carousel.
Features:
- Auto scroll on initial.
- Pause on hover.
- Custom animation speed & interval.
- Custom scroll orientations:top,right,bottom,left.
How to use it:
1. Insert a list of images into your document.
<ul id="scroller"> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li> <li><img src="4.jpg" alt="" /></li> <li><img src="5.jpg" alt="" /></li> <li><img src="6.jpg" alt="" /></li> <li><img src="7.jpg" alt="" /></li> </ul>
2. Include jQuery JavaScript library and the jQuery imagescroll plugin at the bottom of the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="lib/ImageScroll.js"></script>
3. Call the plugin on the ul element to generate a scroller/carousel from the image list you just created.
$('#scroller').imageScroll();
4. Config the ImageScroll plugin..
$('#scroller').imageScroll({
// top,right,bottom,left optional
orientation:"left",
// animation speed
speed:600,
// animation interval
interval:1500,
// pause on hover
hoverPause:true,
// callback function after every scroll motion
callback:function(){ return false;}
});
This awesome jQuery plugin is developed by yesvods. For more Advanced Usages, please check the demo page or visit the official website.










