Слайдер - карусель

Что умеет этот слайдер:

- автоматическая прокрутка слайдов влево;

- прокрутка слайдов вправо/влево по клику на кнопках навигации;

- остановка автоматической прокрутки при наведении мыши на область слайдера;

- нет ограничений на содержимое и количество слайдов.

С подробным обсуждением кода можно ознасомиться в статьях "Слайдер с прокруткой (карусель)", "Заканчиваем работу над слайдером-каруселью" и "Исправляем баги в слайдере-карусели" .

Посмотреть демо, или скачать готовый код можно по ссылкам ниже:

html разметка для слайдера карусели:

<div class="carousel_wrap">	
	<span class="prev">prev</span>
	<span class="next">next</span>		
	<div class="visual_block">
		<ul>
			<li>
				<img src="/slider_image1.jpg" alt="" />
				<div class="text">Подпись к фото 1</div>
			</li>
			<li>
				<img src="/slider_image2.jpg" alt="" />
				<div class="text">Подпись к фото 2</div>
			</li>
			<li>
				<img src="/slider_image3.jpg" alt="" />
				<div class="text">Подпись к фото 3</div>
			</li>
		</ul>
	</div>		
</div>

Вариант оформления слайдера:

.carousel_wrap  {
margin: 50px auto;
width:700px;
height:400px;
position:relative;
}
.visual_block {
margin: 0 auto;
height:100%;
position: relative;
overflow: hidden;
}
.visual_block ul {
position: relative;
}
.visual_block ul, .visual_block li {
height:100%;
float: left;
position: relative;
}
.visual_block li {
width:640px;
}

.carousel_wrap span.next, .carousel_wrap span.prev {
margin-top:-20px;
width:15px;
height:26px;
display:block;
text-indent:-9999px;
overflow:hidden;
cursor:pointer;
background:url(slider2_arrow.png) no-repeat;
position:absolute;
top:50%;
}
.carousel_wrap span.next {
right:0;
background-position:-15px 0;
}
.carousel_wrap span.next:hover {
background-position:-15px -26px;
}
.carousel_wrap span.prev:hover {
background-position:0 -26px;
}

.text {
padding:20px 10px;
width:97%;
font-size:14px;
color:#ff0000;
position:absolute;
bottom:0;
left:0;
background-color:#ccc;
opacity:0.7;
filter: alpha(opacity=70);
}

js код:

	
$(document).ready(function(){
	var elWrap = $('.carousel_wrap');
	var	visual = $('.visual_block');
	var	carousel = visual.children('ul');
	var	visible = 1;
		itemWidth = carousel.children().outerWidth(),
		itemsTotal = carousel.children().length,
		autoChange = 5000,
		btnNext = $('.next'),
		btnPrev = $('.prev');

	visual.css({'width': visible * itemWidth + 'px'});
	
	carousel.css({'width': itemsTotal * itemWidth,	'left': 0});
	
	function chengeLeft () {
		var item = carousel.children().eq(0);
		btnNext.off('click', chengeLeft);		
		carousel.animate({left: -itemWidth}, 500, function() {
			item.appendTo(carousel);		
			carousel.css({"left": 0 });	
			btnNext.on('click', chengeLeft);
		});
	}	
	
	function chengeRigth () {
		var item = $(carousel).children().eq(-1);
		item.prependTo(carousel);
		carousel.css({"left": -itemWidth});		
		btnPrev.off('click', chengeRigth);		
		carousel.animate({left: 0}, 500, function() {
			btnPrev.on('click', chengeRigth);
		});
	}	
	
	var interval = setInterval(chengeLeft, autoChange);

	btnNext.on('click', chengeLeft);	
	btnPrev.on('click', chengeRigth);	
	
	elWrap.mouseover(function() {
		clearInterval(interval);
	});
	
	elWrap.mouseout(function() {
		interval = setInterval(chengeLeft, autoChange);
	});	
});

Карусель проверена в ИЕ 7-8-9, FireFox, Chrome, Safari.