Заканчиваем работу над слайдером-каруселью

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

$('.next').click(chengeLeft);

А вот для кнопки prev понадобится написать функцию, которая будет прокручивать галерею в другую сторону. Назовем ее chengeRigth. Логика у этой функции будет немного отличаться от chengeLeft.

function chengeRigth () {
	var item = $(carousel).children().eq(-1);
	item.clone().prependTo(carousel);
	carousel.css({"left": -itemWidth});
	carousel.animate({left: 0}, 500);
	item.remove();	
}

Здесь мы так же создаем переменную item, но хранить она будет не первый, а последний слайдер. Далее мы клонируем последний элемент и переносим клон в начало карусели, после чего позиционируем элемент UL влево, относительно левой границы блока visual_block на ширину, равную значению переменной itemWidth (ширина одного слайда). Следующим шагом с помощью метода animate смещаем элемент UL обратно (в первоначальное положение - у нас становится видимым перемещенный элемент карусели). И, наконец, удаляем последний элемент. Таким образом визуально создается эффект сдвига карусели вправо. Теперь осталось только активировать функцию при клике на кнопке prev и задача выполнена.

$('.prev').click(chengeRigth);

По сути, нам остается только написать код, который будет останавливать прокрутку, если курсор мыши будет находиться в области слайдера и возобновлять анимацию, когда пользователь уводит курсор за пределы карусели. С этой задачей мы уже сталкивались, когда писали код для слайдера с эффектом затухания. Прибегнем к этому способу и сейчас. Сохраним активацию функции setInterval в переменную interval. Теперь, когда нам понадобится прервать анимацию (курсор мыши находится в пределах блока carousel_wrap), мы останавливаем работу setInterval. Как только курсор мыши оказался вне блока carousel_wrap, снова запускаем анимацию.

var interval = setInterval(chengeLeft, autoChange);
...

elWrap.mouseover(function() {
	clearInterval(interval);
});

elWrap.mouseout(function() {
	interval = setInterval(chengeLeft, autoChange);
});

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

В боаузерах Chrome и Safari наш замечательный слайдер виден не будет. Вся проблема заключается в том, что в момент загрузки страницы скрипт подгружается раньше, чем картинки. Соответственно, методы outerWidth и outerHeight передадут в переменные значения, равные нулю. Один из вариантов лечения данной проблемы - указать размеры для блоков carousel_wrap, visual_block, .visual_block ul и .visual_block li в css.

.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;
}

Естественно, в этом случае переменная itemHeight и расчет высоты блока visual_block в скрипте не понадобятся. Весь js у нас теперь приобрел следующий вид.

$(document).ready(function(){
	var elWrap = $('.carousel_wrap'),
		visual = $('.visual_block'),
		carousel = visual.children('ul'),
		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);

		carousel.animate({left: -itemWidth}, 500, function() {
			item.clone().appendTo(carousel);		
			item.remove();
			carousel.css({"left": 0 });		
		});
	}	
	
	function chengeRigth () {
		var item = $(carousel).children().eq(-1);
		item.clone().prependTo(carousel);
		carousel.css({"left": -itemWidth});
		carousel.animate({left: 0}, 500);
		item.remove();	
	}	
	
	var interval = setInterval(chengeLeft, autoChange);

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

Вот теперь мы действительно справились с задачей. О том, как стилизовать подписи к фото, рассказывать не стану - это относится скорее к css, нежели к данной теме, но в примере для скачивания будет представлен вариант, где подписи будут расположены поверх фото.

Скачать готовый код примера со стилизованными подписями к фото можно по ссылке ниже:

В следующей статье исправим некоторые недочеты и ошибки связанные с работой слайдера.

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