31 мая 2012 (обновлено 01 мая)

Простая карусель на jQuery

Да, тема давольно-таки заезженная. Но все же, найти то, что действительно нужно, зачастую сложно. Все предлагают сильно навороченные скрипты, с множеством лишнего функционала. И обычно это уже сжатые плагины.

Поэтому я предложу свой альтернативный вариант совсем простой карусели на 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). То есть сделать из этой простенькой галереи можно все, что нужно в рамках поставленной задачи!

Также следует отметить, при приведенный пример является адаптивным, то есть  размер карусели адаптируется в соответствии с размерами экрана и будет коррекно отображаться как на экране компьютера или ноутбука, так и на экранах планшетов и смартфонов.