Сегодня немного про карусельки, поскольку в последние время я сделал две на одной разметке и крайне доволен решением, я поделюсь им с вами.
Сначала об общих моментах, разметка по большей части на ваше усмотрение, а я использовал такую, как по мне достаточно семантично и главное ничего лишнего. Внутрь li-шек помещается контент который надо каруселить, например картинки.
<div id="slider" class="c">
<a class="ib arrow left" href="#"></a>
<ul class="ib">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a class="ib arrow right" href="#"></a>
</div>
CSS на самом деле еще больше на ваше усмотрение, главные моменты тут такие
li { display:none; } /* все слайды скрыты*/
.c {} /*просто контейнер*/
.ib { display:inline-block; } /*можно еще хаки для ie*/
.arrow { background:url("") no-repeat; } /*картинка со стрелочками*/
.arrow.left { background-position: 0 0; } /*ну вы поняли*/
.arrow.right { background-position: 0 0; }
.active { display:inline-block; } /*текущий элемент карусели*/
А вот и сладенькое, первый скрипт показывает только одну li-шку за раз и при достижении крайней точки начинает с противоположного конца
$(".arrow", "#slider").click(function(){
var self = $(this),
direction = self.is(".left") ? -1 : 1,
collection = self.parent().find("li"),
index = collection.filter(".active").removeClass("active").index(),
next = (collection.length + index + direction) % collection.length;
collection.eq(next).addClass("active");
return false;
}).eq(1).trigger("click");
А второй показывает количество определенное в переменной number и при достижении крайней точки останавливаеться.
$(".arrow", "#slider").click(function(){
var self = $(this),
direction = self.is(".left") ? -1 : 1,
collection = self.parent().find("li"),
index = collection.filter(".active:first").index(),
number = 5;
index = Math.max(0, Math.min(index + direction, collection.length - number));
collection.removeClass("active").filter(function(){
var self = $(this);
return self.index() >= index && self.index() < index + number;
}).addClass("active");
return false;
}).eq(1).trigger("click");
Зачему еще что обе карусели сами инициализируються, тоесть зарание выставлять класс active не надо.