jQuery Image carousel plugin for jquery

This jquery plugin takes a container element and wraps in an extra container and creates two links -- one for scrolling it's content to the left and the other for scrolling it to the right.

Download it here or grab the code below

The script has been tested on Safari, IE and FF .

It does require all scrollable items to share the same width -this is something I may change in a later version

Several carousel options are exposed for controlling automated scrolling , lay-out etc.

This can be seen the carousel below that was created with the following call:

$(function(){
 
	$('.imgContainer').imageCarousel({
		leftArrowText: 'left',
		rightArrowText: 'right',
		visibleItems:2,	
		moveElements:1,
		speed:2000,
		itemHeight:0,
		autoScroll:true
	})
}

And the following html:

<div class="imgContainer">	
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/sintsample.jpg" alt="image" />
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/kralen_1247522903520.png" alt="image"/>
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/site_psychonaut.jpg" alt="image"/>
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/site_joriso.jpg" alt="image"/>
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/site_hardcode_shop.jpg" alt="image"/>
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/site_wipwapwebdesign.jpg" alt="image"/>
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/site_silig.jpg" alt="image"/>
<img align="right" src="http://www.hardcode.nl/hardcode/userfiles/2/site_rapidprint.jpg" alt="image" />
</div>
 

Here's the javascript:

(function($){
  $.fn.imageCarousel = function(options) {
 		var busy = false, i=0,endReached = false; 
 		var opts = $.extend({}, $.fn.imageCarousel.defaults, options);
 
 		this.each(function() {
   		$this = $(this);
   		$children = $(this).children();
			$firstchild = $children.eq(0);
			var itemHeight = opts.itemHeight ? opts.itemHeight : $firstchild.outerHeight(true);
			var itemWidth = $firstchild.outerWidth(true);
			var totWidth = parseInt($children.length) * itemWidth;
   		//store itemWidth
   		/* @todo - allow for variable width elements: */
 
   		$this.data("imageCarouselData", {'itemWidth': itemWidth,'itemHeight':itemHeight});
   		// update element styles
   		$children.css({'float':'left'});
 			$this.wrap('<div style="position:relative; height:'+itemHeight+'px; width:'+opts.visibleItems*itemWidth+'px; overflow:hidden" class="featureWindow" ></div>')
			 	.css({position:'absolute',top:'0px',left:'0px', width:totWidth+'px',margin:'0px',paddingRight:'0px',paddingLeft:'0px',height:itemHeight+'px'})
			 	.parent().after('<div class="carouselButtons"><a href="#" class="leftArrow carouselWhiteArrows ">'+opts.leftArrowText+'</a><a href="#" class="rightArrow carouselWhiteArrows">'+opts.rightArrowText+'</a></div>'); 
		});
		$('.carouselWhiteArrows').click(function(){	
			if (busy) return false; 
			busy = true;
			var featureWindow = $(this).parent().prev();
			var featureContainer = featureWindow.children().eq(0);
			var features = featureContainer.children();
			var curPos = featureContainer.offset().left - featureWindow.offset().left //- featureWindow.offsetParent().offset().left;
			var direction = this.className.indexOf('eftArrow'); 
			var dat = featureContainer.data('imageCarouselData');
			var xMove = dat.itemWidth * opts.moveElements;
			var newX = parseInt(curPos) + (xMove * direction)
 
			if (direction===1 && curPos >=0){
				newX = -parseInt((featureContainer.outerWidth(true))- featureWindow.outerWidth(true));
				endReached = true; 
			}else{
				//check for end of the list/*
				if (direction == -1){ 
						if((parseInt(featureContainer.outerWidth(true)+newX )- featureWindow.outerWidth(true))< 0){
						if (!endReached){
							endReached = true; 
							newX = -parseInt((featureContainer.outerWidth(true))- featureWindow.outerWidth(true));
						}else{
							endReached = false; 
							newX=0;
						}
					}
				}else if (newX >=0){newX = 0}
			}
			featureContainer.animate({left: newX+'px'}, opts.speed,function(){busy=false;});
			return false;
		});
		if (opts.autoScroll){
			var lastArrow = $('.rightArrow').eq($('.rightArrow').length-1);
		 	setInterval(function(){lastArrow.click()},opts.speed+1000);
		}
	return this;
  };
 
  $.fn.imageCarousel.defaults = {
 	leftArrowText: 'left',
 	rightArrowText: 'right',
 	visibleItems:4,
 	moveElements:3,
 	speed:2000,
 	itemHeight:0,
	autoScroll:false
  };
})(jQuery);
 
 

This how you initiate:

$('.latestFeatures').imageCarousel();

The css for the buttons is fully flexible and can be set for example like so :

.carouselWhiteArrows{margin:6px; background:red, color:white}
.rightArrow{float:right}
.leftArrow{float:left}