Recently I’ve had the need to build several jQuery widgets, because, no matter how many already exist in the wild, they never seem to have all the features I require. Reinventing the wheel? Well yes, but there’s no harm if the current wheel doesn’t fit the vehicle.
So without further ado, here’s the first: the carousel.
Take a look at the page of example carousels first, to see the various implementation options.
You can find all the source code hosted on GitHub here, with tarballs and zips:
The core HTML of the carousel should look something like this:
<div class="carousel"> <div class="clip"> <ul class="horizontal"> <li>…</li> <li>…</li> <li>…</li> <li>…</li> </ul> </div> </div>
div must be the direct parent of the clip
div, which in turn must be the direct parent of the
ul element. The current version of the carousel script does not support the use of an ol, but it’s one of the features on my todo list.
For a vertical carousel, you should substitute the
horizontal class with
The only required CSS for the carousel, is the carousel.core.css file:
<link rel="stylesheet" href="css/carousel.core.css" type="text/css" charset="utf-8">
My examples also include a CSS skin file that applies some styling to the carousel controls. Feel free to reuse this, or poke at it to come up with your own styles:
<link rel="stylesheet" href="css/carousel.skin.css" type="text/css" charset="utf-8">
Once you’ve done that, you can simply apply the
carousel() method to any jQuery object, like so, to get the default options:
Alternatively, you can configure the carousel by passing it a configuration object like so:
Parameters for the configuration object are as follows:
|visiblePanes||The number of panes that are visible in the clipping area.|
|panesToMove||The number of panes to move the carousel when next/previous are clicked.|
|pagination||Boolean value to turn on or off pagination.|
|speed||Speed of the transition between panes.|
|loop||Boolean value to specify if the carousel loops after the final pane has been reached.|
|autoplay||Boolean value to specify whether the carousel autoplays.|
|hovercontrols||Boolean value to specify if the controls only display when hovering over the carousel.|
|hoverpause||Boolean value that activates pause when hovering the mouse over the carousel.|
|delay||The delay, in milliseconds, between transitions when the carousel is playing.|
|transition||A reference to a transition function defined at $.fn.carousel. E.g. “yourTransitionHere” would reference a function defined at $.fn.carousel.yourTransitionHere.|
For more on the transition hooks, it’s probably best to take a look at the code. When I have more time, I’ll look at updating the GitHub wiki with details myself.