Да, тема давольно-таки заезженная. Но все же, найти то, что действительно нужно, зачастую сложно. Все предлагают сильно навороченные скрипты, с множеством лишнего функционала. И обычно это уже сжатые плагины.
Поэтому я предложу свой альтернативный вариант совсем простой карусели на jQuery.
Она может использоваться как карусель изображений, так и карусель новостей или любого другого контента =)
Единственный небольшой наворот, что я себе позволил - это тень у блока карусели.
UPD: 6.07.2014
Выглядеть оно будет примерно так:
ДЕМО Скачать
Структура примет следующий вид:
<!DOCTYPE html>
<html>
<head>
<title>TJ simple adaptive carusel</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- подключаем последнюю версию jQuery -->
<script type="text/javascript" src="/carousel.js"></script> <!-- подключаем наш скрипт -->
<link rel="stylesheet" type="text/css" href="/css/styles-carousel.css"> <!-- подключаем стилевой файл -->
</head>
<body>
<div class="">
<div class="carousel shadow">
<div class="carousel-button-left"><a href="#"></a></div>
<div class="carousel-button-right"><a href="#"></a></div>
<div class="carousel-wrapper">
<div class="carousel-items">
<div class="carousel-block">
<img src="/images/1.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/2.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/3.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/4.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/5.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/6.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/7.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="/images/8.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Опишем стили:
.carousel {
max-width: 1080px; /* ширина всего блока */
margin: 50px auto;
width:100%;
}
.carousel-wrapper {
margin: 10px 30px; /* отступы для стрелок */
overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
position:relative;
}
.carousel-items {
width: 10000px; /* устанавливаем большую ширину для набора элементов */
position: relative; /* позиционируем блок относительно основной области карусели */
}
.carousel-block {
float: left; /* выстраиваем все элементы карусели в ряд */
width: 250px; /* задаём ширину каждого элемента */
padding: 10px 10px 10px 0px; /* делаем оступы, чтобы элементы не сливались */
}
.carousel-block img{
display:block;
}
/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
width: 25px;
height: 36px;
position: relative;
top: 80px;
cursor: pointer;
text-decoration:none;
}
.carousel-button-left a{
float: left;
background: url(../images/carousel-left.png);
}
.carousel-button-right a{
float: right;
background: url(../images/carousel-right.png);
}
/*********** SHADOW ***********/
.shadow{
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}
И, наконец, как оно должно работать:
//Обработка клика на стрелку вправо
$(document).on('click', ".carousel-button-right",function(){
var carusel = $(this).parents('.carousel');
right_carusel(carusel);
return false;
});
//Обработка клика на стрелку влево
$(document).on('click',".carousel-button-left",function(){
var carusel = $(this).parents('.carousel');
left_carusel(carusel);
return false;
});
function left_carusel(carusel){
var block_width = $(carusel).find('.carousel-block').outerWidth();
$(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items"));
$(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
$(carusel).find(".carousel-items .carousel-block").eq(-1).remove();
$(carusel).find(".carousel-items").animate({left: "0px"}, 200);
}
function right_carusel(carusel){
var block_width = $(carusel).find('.carousel-block').outerWidth();
$(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
$(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items"));
$(carusel).find(".carousel-items .carousel-block").eq(0).remove();
$(carusel).find(".carousel-items").css({"left":"0px"});
});
}
$(function() {
//Раскомментируйте строку ниже, чтобы включить автоматическую прокрутку карусели
auto_right('.carousel:first');
})
// Автоматическая прокрутка
function auto_right(carusel){
setInterval(function(){
if (!$(carusel).is('.hover'))
right_carusel(carusel);
}, 3000)
}
// Навели курсор на карусель
$(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')})
//Убрали курсор с карусели
$(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})
Соответственно, тенюшку можно убрать. А для применения нужно всего лишь в css заменить размер основного блока и вложенных "скроллящихся" блоков. Так же очень легко зациклить этот процесс, дабы он скроллился автоматически (в данном случае, достаточно раскомментировать вызов функции auto_right). То есть сделать из этой простенькой галереи можно все, что нужно в рамках поставленной задачи!
Также следует отметить, при приведенный пример является адаптивным, то есть размер карусели адаптируется в соответствии с размерами экрана и будет коррекно отображаться как на экране компьютера или ноутбука, так и на экранах планшетов и смартфонов.