Circular Carousel

Another disappointment of the jCarousel, and this was a big one, was the fact that its feature of making a circular carousel was not working properly. For example, if you'd like to have 5 items visible, 5 items scrolling and 7 or 12 items total, you would be surprised to see that it's not working as expected, as you can see here. Again, because I needed this feature in one of my projects, I made a minimal, but working, circular carousel from scratch.

First of all, let's see how it works.

demo

Now that you've seen it, let's see how you can use it in your own projects. 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 visible = 5;
            var scroll = 5;
            var speed = 350;
            var prev = $('ul#circular_nav li.prev');
            var next = $('ul#circular_nav li.next');
            var auto = true;
            var delay = 2;
            var stopAutoAfterClick = false;
            $('#circular').circularCarousel(visible, scroll, speed, prev, next, auto, delay, stopAutoAfterClick);
        });
    </script>

  4. Apart from the float, width and height of the elements that are scrolling, you have to set in the CSS all the other necessary styles.

And you're all set!

Now, let's talk in more detail about this plugin and what its parameters do. These are the parameters that the Circular Carousel plugin accepts:
- the number of items that should be visible
- the number of items that should scroll once
- the speed of the animation in milliseconds
- the DOM element that will be the "previous" button
- the DOM element that will be the "next" button
- whether the carousel should auto scroll or not
- the delay between two scrolls, in seconds (this applies only if you've set the carousel to auto scroll)
- whether the carousel should stop auto scrolling if you click prev/next (this applies only if you've set the carousel to auto scroll)

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

<script type="text/javascript">
    $(function(){
        $('#circular').circularCarousel(5, 5, 350, $('ul#circular_nav li.prev'), $('ul#circular_nav li.next'), true, 2, false);
    });
</script>

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

download the plugin

The plugin works with jQuery 1.4 and higher. But if you don't want to attach some event handlers on the elements of the carousel, you could use this plugin with jQuery 1.2.6 and higher, by replacing the "detach" function with "remove".

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.