DarthFader: A jQuery Carousel Plugin with Force

Working with a fair few jQuery image sliders I started to get frustrated with the quirks and rules of some of them. Requiring a paragraph tag to simply add in a caption, only order lists supported, not my cup of tea. So for a new project I decided to write my own plugin. The project required cross fading, so instantly the plugin was crowned darthFader.

Starting off this plugin is currently in it’s infancy. It supports crossfading of whatever elements you want, provided they are wrapped in a container. So if you have a bunch of Div’s, IMG’s, LI’s, or hopes and dreams layered behind one another, the darthFader has you covered.

It also allows you to set up a nav, with forward and back buttons, and dots to replicate how many items in the carousel, of which are clickable to jump you to the item you’ve chosen.

Download the jQuery plugin via:

git clone https://github.com/voidet/jQuery.darthFader /path/to/my/awesome/project

Sites using the force:

http://www.langfordsjewellers.com/

http://www.goplacesbrisbane.com/

http://www.honeybs.tv/

This will save the darthFader plugin ready for you to include in your project. From there you can attach it to your carousel elements by:

$('#carousel-element').darthFader()

Currently there are a few options you can override. The carousel nav element and the pause duration. More will come. I plan on adding a heap more animation styles and configuration options to give more flexibility to the plugin.

However an example on how to override the current options would be:

$('#carousel-element').darthFader({"nav": '#this-is-my-nav-element', 'speed': 5000})

Anyhow let me know if you have any additional features you would like to see included and I will happily consider