Basic Verbs

In one project of ours, we needed a simple and light DOM carousel that will fallback on list when javascript is turned off. By the term “DOM carousel” i mean a carousel that will show/hide/slide DOM elements, complete container (div, p, h) not just images or special types of content. This domCarousel takes the containers one by one and slides them one after another.

Works in a simple manner. Just attach it on the parent container of the elements that will slide, fill in the options object (or use the default values) and you are good to go.

$.fn.domCarousel = function(options){
        // keeping a reference to the carousel object
	var container = this;

        //setting the class of the items that will rotate or default
	var itemClass = (options.itemClass)?(options.itemClass):("dc-item");

        //interval length of transition
	var ti = (options.transitionInterval)?(options.transitionInterval):(10000);

        //label for the start button or default
	var startLabel = (options.startLabel)?(options.startLabel):("Start");

        //label for the stop button or default
	var stopLabel = (options.stopLabel)?(options.stopLabel):("Stop");

        //label for the back button or default
	var backLabel = (options.backLabel)?(options.backLabel):("Back");

        //label for the forward button or default
	var forwardLabel = (options.forwardLabel)?(options.forwardLabel):("forward");

        //display buttons true or false
	var displayButtons = (options.displayButtons)?(options.displayButtons):(true);

       //attach a class to the buttons
	var buttonClass = (options.buttonClass)?(options.buttonClass):('button');

	//initializing and help vars.
	var intervalID = ""; //id of the interval object so we can control it
	var mutex = false; //mutex so the transitions wont overlap
	var min_height = 0; 

        //hide all the elements
	$(container).find("."+itemClass+":gt(0)").hide();
	//make them position relative and add some style to them
        //(you can change this so it suits you better)
	$(container).css("position","relative");
	$(container).css("margin-top","20px");
	$(container).find("."+itemClass).css("margin","0px");

	var currentIndex = 0; //this is the currently active em

       //This is where the magic happens. Using current item reference
 	//and the mutex, we animate blocks one by one. See why mutex
       // is important
	container.changeItem = function(){
		if(!mutex){
			mutex=true;
			$(container).find("."+itemClass+":eq("+currentIndex+")")
                                .hide("slide",{direction: 'left'},300,function(){

			nextToShow = (currentIndex == $(container)
                                       .find("."+itemClass).length-1)
                               ? (0):(currentIndex+1);				

				$(container).find("."+itemClass+":eq("+nextToShow+")")
                                .show("slide",{direction: 'right'},300,function(){
					currentIndex = nextToShow;
					mutex=false;
				});
			});
		}
	}

	// same function from above but for back
	container.changeBack = function(){
		if (!mutex) {
			mutex = true;
			$(container).find("." + itemClass +
                                  ":eq(" + currentIndex + ")").hide("slide", {
				direction: 'right'
			}, 300, function(){
			nextToShow = (currentIndex == 0) ?
                        ($(container).find("." + itemClass).length - 1) : (currentIndex - 1);

			$(container).find("." + itemClass + ":eq(" + nextToShow + ")")
                        .show("slide", {
					direction: 'left'
				}, 300, function(){
					currentIndex = nextToShow;
					mutex = false;
				});
			});
		}
	}

	//Initialize the interval and animate
	container.play = function(){

		if(!intervalID){
			$(container).find("input.dc_button_ss").val(stopLabel);
			$(container).find("input.dc_button_ss").click(function(){
				container.stop();
			});
			intervalID = setInterval(function(){
				container.changeItem();
			},ti);
		}
	}

	//find the interval and remove it
	container.stop = function(){
		if(intervalID){
			$(container).find("input.dc_button_ss").val(startLabel);
			$(container).find("input.dc_button_ss").click(function(){
				container.play();
			});
			clearInterval(intervalID);
			intervalID = null;
		}
	}

	//Should we display buttons or not.
	if(displayButtons){
		$(container).append('<span style="position: absolute; right: 5px; top: -28px;">
               <input class="dc_button_back '+buttonClass+'" type="button" value="'+backLabel+'" /> 
               <input class="dc_button_ss '+buttonClass+'" type="button" value="'+stopLabel+'" /> 
               <input class="dc_button_forward '+buttonClass+'" type="button" value="'+forwardLabel+'" />');

	        //init button click events
		$(container).find("input.dc_button_back").click(function(){
			container.stop();
			container.changeBack();
		});

		$(container).find("input.dc_button_forward").click(function(){
			container.stop();
		        container.changeItem();
		});
	}
        //start the carousel
	container.play();
}

The plugin is used same as all other jquery plugins : $(selector).domCarousel(options). Options is an object that has these attributes:
itemClass : css class of the transition items,
transitionInterval : time in milliseconds of transition,
startLabel : start button label,
stopLabel : stop button label,
backtLabel : back button label,
forwardLabel : forward button label,
displayButtons : will we display buttons or not,
buttonClass : css class of the buttons

To use this plugin, you will need the jQuery library, the jQuery-UI library and the plugin itself. Live example of the plugin, you can see here the fourth box from top.

Enjoy!