M@Blog

There are few carousel-effect plugins for jQuery out there, of which the most popular seems to be jCarousel. However the requirements - a skin css file, jCarousel’s own css file, etc. - are a bit much when all you want is a simple carousel effect for text and images. Another jQuery carousel plugin, the Accessible News Slider, is a nice alternative but hasn’t been updated since jQuery 1.2 was released.

So in searching for something “lighter” and up to date, I came across jCarouselLite by Ganeshji Marwaha. jCarouselLite indeed lives up to its name - no extra css file and a very small footprint. It even has simple callback hooks and few nice extras for tweaking the usability. By default, the carousel rotates in a circular fashion, which can be turned off. However, even in non-circular mode the “previous” and “next” buttons are visible when you’re at the beginning or end, respectively, of the item list. A new parameter and a few lines of code later solved just that. I now present you with a patched jCarouselLite with support for hiding the previous / next indicators in non-circular mode:

jcarousellite_hidenav.js

(for just the diff -u patch, jcarousellite_hidenav_patch.js)

Enjoy!

UPDATE: It turns out jCarouselLite already had a nice hook in the form of adding the class “disabled” on the prev/next element when you’re at the beginning or end, respectively. Thank you Firebug for revealing this! :) To hide the elements, create styles for the .next.disabled and .prev.disabled classes, something like this:

.next.disabled, .prev.disabled {visibility: hidden}

There was still the bug that the prev/next elements would show the first time the page was loaded, so I’ve updated the links above for this patch.

*n.b.: tested only with one-item rotations, so YMMV

Monday, May 5th, 2008 at 2:15 pm.
Filed under geekery.
Subscribe to RSS 2.0.
Leave a comment or trackback.