jQuery Carousel, those cool rotating, pagination, autoslide banners

Have you ever wondered how to setup your own cool rotating & autoslide banners with pagination – those small buttons with 1, 2, 3 to switch between your website banners – especially on homepage? If so, then jQuery Carousel is an excellent jQuery plugin to do just that! It is simple to use and works perfectly.

Requirements:
Please follow the links below to download the respective javascript files. You may download the compressed versions – which can help minimize your sites size.

1. jQuery Javascript Library
2. jQuery Carousel Plugin

HTML Markup:

1. Add the following to the head section of your HTML markup. Ofcourse, you’ll need to update the path to point to your copy of the required files (which can be downloaded above).

   
   <script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript" src="/js/jquery.carousel.pack.js"></script>
   
   

2. Add the following to the body section of your HTML markup. This includes your banner files and their respective links. Don’t forget to apply your CSS styles to class “foo” and it’s child HTML tags.

   
   <div class="foo">
     <ul>
       <li><a href="/link/for/banner1"><img src="/path/to/banner/1.jpg" width="900" height="300" alt="Banner 1"></a></li>
       <li><a href="/link/for/banner2"><img src="/path/to/banner/2.jpg" width="900" height="300" alt="Banner 2"></a></li>
     </ul>
   </div>
   
   

3. Right under the above markup, add the following javascript code to enable jQuery Carousel effect.

   
   <script type="text/javascript">
    $(function(){
    $("div.foo").carousel( {
           direction: "horizontal", // you can change this to vertical
           loop: true,
           pagination: true, // setting this to true adds the pagination 1, 2, 3 etc.
           autoSlide: true, // automatic rotation between the banners
           autoSlideInterval: 5000, // how long in miliseconds till next rotation
           delayAutoSlide: 3000 // how long to pause on each banner
        } );
    });
   </script>
   
   

And that’s all there is to it. Fire up that web browser to see it in action!

There are several more settings which you can play around with to adjust this to your liking. You can visit jQuery Carousel page for more information on it.

I’d love to hear from you with links to see your application of this effect.