Simple jquery carousel image rotator

Code and demo for a simple jQuery carousel / image rotator, thing works on IE6, used in WordPress.

This jQuery carousel has got auto rotate regime and scroll buttons both. In this demo the buttons are turned off with .carouselControls{display:none;}

Demo of the simple jquery carousel / image rotator

left right

HTML markup for the simple jquery carousel / image rotator

<div class="carouselWidget">
	<div class="imgContainer">
		<div class="carouselImage"><img alt="" src="image-01.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-02.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-03.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-04.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-05.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-06.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-07.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-08.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-09.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-10.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-11.gif" /></div>
		<div class="carouselImage"><img alt="" src="image-12.gif" /></div>
	</div>
</div>
<div class="carouselControls">
	<a class="carouselControlLeft" href="#">left</a>
	<a class="carouselControlRight" href="#">right</a>
</div>

JavaScript / jQuery for the simple jquery carousel / image rotator

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script type="text/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 itemWidth = $firstchild.outerWidth(true);//width of one image space
				var totWidth = parseInt($children.length) * itemWidth;
				$this.data("imageCarouselData", {itemWidth:itemWidth});
				$('.imgContainer').css({width:totWidth+'px'});//total width of all items
			});
			$('.carouselControls').children().click(function(){
				if (busy) return false;
				busy = true;
				var carouselWidget = $(this).parent().prev();
				var featureContainer = carouselWidget.children().eq(0);
				var features = featureContainer.children();
				var curPos = featureContainer.offset().left - carouselWidget.offset().left //- carouselWidget.offsetParent().offset().left;
				var direction = this.className.indexOf('arouselControlLeft');
				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))- carouselWidget.outerWidth(true));
					endReached = true;
				}else{
					//check for end of the list/*
					if (direction == -1){
							if((parseInt(featureContainer.outerWidth(true)+newX )- carouselWidget.outerWidth(true))< 0){
							if (!endReached){
								endReached = true;
								newX = -parseInt((featureContainer.outerWidth(true))- carouselWidget.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 = $('.carouselControlRight').eq($('.carouselControlRight').length-1);
				setInterval(function(){lastArrow.click()},opts.speed+1000);
			};
			return this;
		};
		$.fn.imageCarousel.defaults = {
			visibleItems:3,
			moveElements:1,
			speed:2000,
			autoScroll:false
		};
	});

	$(function(){
		$('.imgContainer').imageCarousel({
			visibleItems:4,
			moveElements:2,
			speed:2000,
			autoScroll:true
			});
	});
</script>

CSS for the simple jquery carousel / image rotator

<style type="text/css">
	.carouselWidget{
		height:100px;
		overflow: hidden;
		position:relative;
		width:256px;
	}
	.imgContainer{
		left:0;
		position:absolute;
		top:0;
		width:auto;
	}
	.carouselImage{
		float:left;
		height:100px;
		width:64px;
	}
	.carouselControls{
		display:none;/*script requires this element, so we turn it out here*/
		float:left;
		width:256px;
	}
	.carouselControlRight{
		float:right;
		width:auto;
	}
	.carouselControlLeft{
		float:left;
		width:auto;
	}
</style>

2011