As i said before, i will show you some more nice tricks on that carousel. Today i will show you how can you put a fully automated pagination.

How it works?

A page have five items. So we need to scroll five items with one click. We take the full width of carousel items wrapper (UL) and divide to carousel width (div.carousel). To be sure we will have an integer number, we will round up the number (using Math.ceil()). After that, we will insert a link for each page between previous and next link. So, here how I did it: (to avoid confusion, i will use italics for previous/next links – which actually is the carousel control)

Just before of closing carousel function (actually each loop), we add this lines:

1
2
3
4

$(_this).find('a.prev').after('<span></span>');
for(i=0;i<Math.ceil($(_this).find('ul').width()/$(_this).width());i++){
	$(_this).find('.ctrls span').append('<a href="#">'+(i+1)+'</a>');
}

1
2
3
4
5
6
7

$(_this).find('.ctrls span a').unbind().click(function(){
	var incrementWith = $(_this).find('.ctrls span a').index(this);
	$(_this).find('ul').animate({left:-(incrementWith*$(_this).width())},function(){
		carouselCtrls();
	});
	return false;
});

In other words you will detect which link was clicked and multiply his index with carousel width. Because index is starting with zero, page 1 will be the first.

Ok, that is all for today. In few days i will show you how to make this carousel to be autoscrolled on certain period of time. To give you a hint, i tell you it’s all about setInterval (javascript) and trigger (jquery) Meanwhile, you can see a demo for this pagination HERE.