Карусель

Сегодня немного про карусельки, поскольку в последние время я сделал две на одной разметке и крайне доволен решением, я поделюсь им с вами.

Сначала об общих моментах, разметка по большей части на ваше усмотрение, а я использовал такую, как по мне достаточно семантично и главное ничего лишнего. Внутрь 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 не надо.

3 Комментарии “Карусель

  1. думал делать что-то подобное, обычно для разных стрелок разные функции, но обломало, погоняю решение, отпишусь :)

Комментарии закрыты