Ok, as i said before, i will make an article about what option you have when you want to use a carousel. As a jQuery user as I am, the first option i have is Sorgalla’s Carousel. It’s pretty easy to use but has some disadvantages:

• big size - around 50k, maybe more, without another 20k for jQuery
• some IE6 problems - yes, IE6 still has a huge market share. We still need to pull out our hair to make this piece of crap display good all pages
• you cannot highlight current tab - if you want to use it as a tab pagination, you simply cannot highlight selected tab. Or current page.

So, on an older project of mine, i wanted to use a very light script for doing this. Because i was in a really rush, i didn’t focus on unobtrusive scripts so i put some inline javascript (yes, shame on me).

1
2
3
4

<div id="slideCtrl">
 <a class="s1 s" onclick="showSlide(1);return false;" href="#">Tab 1</a>
 <a class="s2" onclick="showSlide(2);return false;" href="#">Tab 2</a>
 <a class="s3" onclick="showSlide(3);return false;" href="#">Tab 3</a></div>

Ok, this is for control. The most important thing is that you can put this ANYWHERE in your page. For example, you can put controls on header and slider on footer of your page. Only your imagination is the limit.

The next thing you have to do is to put some markup:

1
2
3
4
5
6
7
8
9
10

<div id="slider">
<div class="slider">
<div class="slideWrapper">
<div class="box">Tab 1 content</div>
<div class="box">Tab 2 content</div>
<div class="box">Tab 3 content</div>
</div>
<!--/.slideWrapper--></div>
<!--/.slider--></div>
<!--/slider-->

This script also has some limitation:

• You can have only one on page;
• Is pretty obtrusive;
• Doesn’t do auto slide. Of course, you can set a timer for this, but i wanted an easy example.

The next thing we have to do is to set some CSS.

Width and height for carousel:

#slider {
	width:674px;
	height:185px;
}

#slider .slider {
	width:660px;
	overflow:hidden;
	margin:0 auto;
	position: relative;
	height:160px;
}
#slider .slideWrapper {
	width:2640px;
	position: absolute;
	height:160px;
}

The slideWrapper container must have a big width: a tab width * number of tabs. If you have five tabs with 500px wide each, the slideWrapper must have around 2500px wide (even more, nobody will be upset).

The next thing we have to stylize is each tab-box (.box). For this, we need to float each box:

#slider .box {
	width:660px;
	float:left;
	padding:20px 0;
}

The result will be a wide container which has all boxes on one row. Well.. The html/css part is ends here. The next is… Javascript (or jQuery) part.

The most basic use is this:

var currentslide = 1
function showSlide(nrSld) {
	currentslide = parseInt(nrSld)
	$('#slider .slideWrapper').animate({left:-660*(parseInt(nrSld)-1)})
	redrawBullets(nrSld);
};

What we do? Long story short: we move the slideWrapper container in its parent from left to right and from right to left, according to our needs. Simple, eh?

The redrawBullets function is for highlighting the current selection:

function redrawBullets(slide) {
	var currentBullet = 's'+slide;
	$('#slideCtrl a').each(function(){
	$(this).removeClass('s');
	if($(this).hasClass(currentBullet)){
		$(this).addClass('s')
		}
	});
};

What do we need next? Well.. We only need to test. Here it is a demo (is already used in a site). If you want, you can use EaseIn plugin to add some nice effects on slide.

We have a nice tabbed based navigation with a very cool effect which is ready to use on your site.