Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.
Конечно 3D slider – это решение, которое не рассчитано на старые браузеры, но сам скрипт интересен тем, что не похож на обычные слайдеры, и, когда цель разработчика – сделать интерфейс сайта максимально ярким и необычным, то он будет как раз кстати. Если вы уже ознакомились с демо материалами, то могли увидеть, что слайдер реализован в виде карусели. Ниже вы сможете познакомиться ещё с двумя весьма удачными примерами:
№1 Endangered Species
№2 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"> </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 страницу и, порой, приятно удивить пользователя.