DarthFader: A jQuery Carousel Plugin with Force

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:


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:


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 🙂

Posted by voidet

Categorised under Internet, Programming, Web Design
Bookmark the permalink or leave a trackback.


  1. Hey m8,
    for such posts you definitely need a working demo link.

    Keep em’ rolling.

    May 29, 2012 @ 11:11 pm
  2. Bookmarked. Nicely done mate.

    December 23, 2013 @ 12:34 pm

One Trackback

  1. By Ligas útiles | NuevaWeb Blog on August 22, 2012 at 5:41 pm

    […] que se puede aplicar a elementos que no sean listas https://github.com/voidet/jQuery.darthFader http://www.jotlab.com/2012/01/12/darthfader-a-jquery-carousel-plugin-with-force/ Easy Slider http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider/ […]

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">