Infinite Scroll

This plugin came as a necessity for one of my projects. It's simply a continuously moving carousel with the possibility of pausing the animation on mouse hover. Since the jCarousel, which is the best carousel out there, doesn't have this feature, I saw myself in the need of developing a plugin, a simple one, but one who gives you this possibility.

First, let's take a look at it.

demo

Now that you know what it does, let's see how you can use it. Here are the steps in the order they must be followed:

  1. You load the jQuery library, used by the plugin.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  2. You load the plugin (the packed (minified) version, or the full version if you'd like to make any adjustements to it).

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

  3. You initialize the plugin with its parameters when the DOM is ready.

    <script type="text/javascript">
        $(function(){
            var noOfVisibleItems = 3;
            var theSpeed = 3000;
            var pauseOnHover = true;
            $('#scroll').infiniteScroll(noOfVisibleItems, theSpeed, pauseOnHover);
        });
    </script>

  4. You set in your CSS the float, width and height of the elements that are scrolling.

You're done! With loading two javascript files, a javascript line for initializing the plugin and a minimal CSS style you have a nice and smooth autoscrolling carousel which can be paused on mouse hover!

Now, let's talk in more detail about this plugin and what its parameters do. The Infinite Scroll plugin accepts three parameters:
- the number of items that should be visible
- the speed of the animation in milliseconds
- whether the scrolling carousel should pause on mouse hover or not

You can also initialize the plugin in a single line, without separately defining the parameters:

<script type="text/javascript">
    $(function(){
        $('#scroll').infiniteScroll(3, 3000, true);
    });
</script>

You can download the plugin below. The archive includes an example (with the parameters explained) and the full and packed versions of the plugin.

download the plugin

The plugin works with jQuery 1.2.6 and higher.

For those of you who haven't seen it before,
    $(function(){ code goes here });
is a shorthand for
    $(document).ready(function(){ code goes here });

For any questions, requests or any idea you would like to share with me, plase contact me here.