Что умеет этот слайдер:
- автоматическая прокрутка слайдов влево;
- прокрутка слайдов вправо/влево по клику на кнопках навигации;
- остановка автоматической прокрутки при наведении мыши на область слайдера;
- нет ограничений на содержимое и количество слайдов.
С подробным обсуждением кода можно ознасомиться в статьях "Слайдер с прокруткой (карусель)", "Заканчиваем работу над слайдером-каруселью" и "Исправляем баги в слайдере-карусели" .
Посмотреть демо, или скачать готовый код можно по ссылкам ниже:
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.