Ok, as ai said you before, i want to make a tutorial about a more advanced carousel than previous was.

I won’t explain HTML and CSS code (is very simple and intutive):

		Previous
		Next
	

CSS file:

* {margin:0;padding:0;}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){

		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};

Let see how it works (i will explain only one link because the other one works same – but reverted):
Continue reading →