Simple Automatic Image Scroller with jQuery - ImageScroll

File Size: 4.55 KB
Views Total: 17895
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Automatic Image Scroller with jQuery - ImageScroll

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.