Показать Меню
falbar Слайдер карусель

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

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

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Конечно 3D slider – это решение, которое не рассчитано на старые браузеры, но сам скрипт интересен тем, что не похож на обычные слайдеры, и, когда цель разработчика – сделать интерфейс сайта максимально ярким и необычным, то он будет как раз кстати. Если Вы уже ознакомились с демо материалами, то могли увидеть, что слайдер реализован в виде карусели. Ниже Вы сможете познакомиться ещё с двумя весьма удачными примерами:

№1 Endangered Species

Endangered Species

№2 Julie David – этот пример, как на базе плагина можно сделать оригинальную галерею.

Julie David

Теперь подключим стили и скрипты для того, чтобы разобраться, как работает данный слайдер карусель:

<link href="main.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.cloud9carousel.js" type="text/javascript"></script>
<script src="jquery.reflection.js" type="text/javascript"></script>

Для работы Cloud 9 Carousel необходимо подключить jQuery библиотеку и ещё один плагин, отвечающий за отражения слайдов jquery.reflection.js. Добавляем HTML разметку:

<!-- Наш слайдер -->
<div id="showcase">
	<img class="3d-slide" src="img/slide-firefox.png" alt="Firefox-browser">
	<img class="3d-slide" src="img/slide-wyzo.png" alt="Wyzo-browser">
	<img class="3d-slide" src="img/slide-opera.png" alt="Opera-browser">
	<img class="3d-slide" src="img/slide-chrome.png" alt="Chrome-browser">
	<img class="3d-slide" src="img/slide-iexplore.png" alt="Internet Explorer-browser">
	<img class="3d-slide" src="img/slide-safari.png" alt="Safari-browser">
</div>
<!-- 
	 Элемент для вывода
	 названия активного слайда
-->
<p id="item-title">&nbsp;</p>
<!-- Кнопки упровления -->
<div id="nav">
	<button class="left-slide">
		←
	</button>
	<button class="right-slide">
		→
	</button>
</div>

Теперь добавим JavaScript код, который будет исполняться после загрузки страницы:

$(function(){

});

В первых двух строках сохраним jQuery выборки самого слайдера и элемент, куда будем выводить описание слайдов:

var showcase = $("#showcase"),
	title 	 = $("#item-title");

Вызовем метод showcase.Cloud9Carousel() с переданными настройками, о которых мы поговорим ниже:

showcase.Cloud9Carousel({
	yOrigin: 40,
	yRadius: 46,
	mirror: {
		gap: 11,
		height: 0.3
	},
	buttonLeft: $("#nav > .left-slide"),
	buttonRight: $("#nav > .right-slide"),
	autoPlay: 1,
	bringToFront: true,
	itemClass: "3d-slide",
	onRendered: rendered,
	onLoaded: function(){

		showcase.css("visibility", "visible");
		showcase.css("display", "none");
		showcase.fadeIn(1300);
	}
});

function rendered(carousel){

	title.text(carousel.nearestItem().element.alt);
	var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI);
	title.css("opacity", 0.5 + (0.5 * c));
};

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

$("#nav > button").click(function(e){

	var b = $(e.target).addClass("down");
	setTimeout(function(){
		b.removeClass("down");
	}, 80);
});

Также обрабатываются события нажатия стрелок на клавиатуре (при нажатии влево/вправо идёт смена слайдов):

$(document).keydown(function(e){

	switch(e.keyCode){

		case 37:
			$("#nav > .left-slide").click();
			break;

		case 39:
			$("#nav > .right-slide").click();
			break;
	};
});

Настроек в Cloud 9 Carousel довольно много, мы рассмотрим только те, которые использованы в примере из демо, остальные Вы сможете подробно изучить, перейдя по ссылке.

  • yOrigin – центр карусели по оси y;
  • yRadius – радиус карусели по оси y;
  • mirror – масштаб элемента карусели в самой его дальней точки;
  • buttonLeft – указывается jQuery объект элемента левого переключателя;
  • buttonRight – указывается jQuery объект элемента правого переключателя;
  • autoPlay – автоматический поворот слайдов, он включается когда пользователь наводит курсор на элемент карусели;
  • bringToFront – делает кликабельные слайды и при клике вращает на передний план;
  • itemClass – класс указываемый слайду;
  • onRendered – это callback функция отлавливает момент окончания смены слайда;
  • onLoaded – это также callback функция, которая срабатывает ровно один раз после инициализации плагина.

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено