jCarousel fade plugin

An extension to the great jCarousel plugin.

This is a quick script that I threw together which adds a nice little bit of fading to elements of a jCarousel as they come into and go out of view. I am also using this page as an opportunity to demonstrate how to have two different jCarousels on the same page with different sizes and orientations (since it took me a little while to figure this out when I first tried).

It's all in the CSS!

Example

Carousel 1

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Element 11
Element 12
Element 13
Element 14
Element 15
Element 16
Element 17
Element 18
Element 19
Element 20

Carousel 2

Bob
John
Pete
Sarah
Gloria
Doug
Alan
Julia

Usage

It's very simple to use this plugin, just include the relevant JavaScript files and then call $().jCarouselFade with the same arguments as you would call $().jcarousel. The code on this page is:

// set up carousel1
$('#carousel1 ul').jCarouselFade(
	{
		itemVisible: 4,
		itemScroll: 2,
		orientation: 'vertical',
		itemWidth: 200,
		itemHeight: 20,
		scrollAnimation: 'slow'
	}
);
// set up carousel2
$('#carousel2 ul').jCarouselFade(
	{
		itemVisible: 4,
		itemScroll: 1,
		scrollAnimation: 'slow'
	}
);

Unfortunately I had to add a little hack into the jcarousel source because the provided methods fire to late to do what I wanted to do. So I had to add in an extra method beforeAnimationHandler (see lines 171 and 314 of jcarousel.js) for the changes.

Bugs

The behaviour is a little strange in IE. I think it is probably related to this bug in the jQuery core and will hopefully be fixed when that bug is.

The plugin hasn't been tested on Mac.

...