JQuery Quote Rotator Plugin.

February 7th, 2010

Here’s a jQuery plugin that rotates through list items with a nice fade effect. You may nest any type of element you like inside a given list item.


Quote Rotator Demo

How to make it work.

Drop these scripts in your header:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery.quote_rotator.js" type="text/javascript" charset="utf-8"></script>

Call the function to any list element:

        $(document).ready(function() {
            $('ul#quotes').quote_rotator();
        });

You can specify which quote you’d like to show first by adding a class of active to the list item. If you don’t explicitly add an active class, it will default to the first item in the list.

Configuration options.

        $('ul#quotes').quote_rotator({
         rotation_speed: 7000,                    // defaults to 5000
         pause_on_hover: false,                   // defaults to true
         randomize_first_quote: true              // defaults to false
         buttons: { next: '>>', previous: '<<' }  // defaults to false
        });

Rotation will pause on mouse hover by default. This is nice if you're rotating through links or other elements that you might not want fading away from the user.

Also notice that next/previous buttons are not included by default. If you want buttons, you need override the buttons option. As in the example above, assign a javascript object with next and previous keys. The values will be used as text for your buttons.

Download the project from github

Tags: ,

64 Comments

Your thoughts?

Preview