Совсем недавно я начал изучать JavaScript, затем JQuery, и теперь потихоньку перехожу к плагинам и фреймворкам построенным на основе вышеупомянутых технологий. Параллельно с изучением JS верстаю небольшие сайты-визитки, и вот у меня возникла необходимость сделать “карусель” из картинок. Оказалось, есть уже готовые решения, и об одном из них я хочу вам рассказать. Данная статья является выдержками с оригинального сайта фреймворка RounAbout.
Введение.
Этот урок поможет превратить неупорядоченный список в карусель. Хотя это и не сложно, предполагается, что Вы можете правильно создать html-файл, подключить в него CSS и JavaScript, и посмотреть, как все это работает.
Подготовка.
Перед тем, как мы начнем рыться в коде, нужно скачать все скрипты и подключить их. Вам нужно:
- Открыть html-файл в вашем любимом редакторе
- jQuery
- Roundabout
Давайте сохраним все файлы в одну папку. Если же вы хотите распределить файлы в соответствии с их типами — не забудьте заменить пути в примерах!
Подготовка html-страницы.
Внутри body добавьте следующий код:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Скрипты.
Подключим нужные нам скрипты. Для этого просто добавьте следующий код в самый низ тега body (так написано на сайте фреймворка, правильнее было бы подключать их в head).
<script src="jquery.js"></script>
<script src="jquery.roundabout.js"></script>
Карусель.
Ниже подключенных скриптов добавьте следующий код:
<script>
$(document).ready(function() {
$('ul').roundabout();
});
</script>
Что здесь происходит?
Мы создаем событие для jQuery, по окончанию загрузки document. Как только html-страничка загрузится, браузер отразит все элементы, функция будет запущена.
Внутри функции с помощью jQuery отбираем все элементы с тегом ul и применяем к ним функцию roundabout. Сохраните html-код и попробуйте запустить его в браузере. Вы должны увидеть что-то вроде карусели.
CSS.
Карусели требуются некоторые CSS-корректировки, чтобы выглядеть лучше. CSS-файл не подключен, и он здесь и не нужен, это не на столько большой документ, просто вставьте следующий код в тег head:
<style>
.roundabout-holder {
list-style: none;
padding: 0;
margin: 0;
height: 5em;
width: 5em;
}
.roundabout-moveable-item {
height: 4em;
width: 4em;
cursor: pointer;
background-color: #ccc;
border: 1px solid #999;
}
.roundabout-in-focus {
cursor: auto;
}
</style>
Класс .roundabout-holder добавится в ul самостоятельно. Нужно это чтобы убрать маркеры списка и установить размер, выделенный под карусель.
Класс .roundabout-moveable-item добавится только в li. Элементы li обретут размер, а при наведении указатель мышки изменится на “руку”.
Класс .roundabout-in-focus добавится в li когда элемент будет впереди(focus). Такому элементу мы вернем указатель к исходному.
CSS-настройки.
С помощью гибкой настройки карусели через CSS ее изменение становится больше искусством, нежели наукой. Попробуйте изменить width у класса .roundabout-holder на 10em. Видите, как заполняются элементы? Карусель будет делать все возможное, чтобы заполнить всю выделенную ей область, однако некоторые элементы при движении будут выходить за пределы установленных границ.
Поиграйтесь с этими настройками карусели, чем спонтаннее будут ваши изменения, тем веселее будет становиться карусель(в оригинале используется слово crazy).
Настройка параметров.
До этого мы сделали самую простейшую карусель с предустановленными параметрами, но на самом деле при вызове функции мы можем передать объект с настройками, тем самым более гибко настроить нашу карусель.
Делается это с помощью следующего кода:
<script>
$(document).ready(function() {
$('ul').roundabout({
//объект настроек
});
});
</script>
Доступные опции.
На самом деле этих опций достаточно много, но сейчас мы попробуем задействовать одно из самых интересных.
Добавим в html-код:
<a href=”#” class=”.next”>Следующий</a>
В roundabout передадим следующее свойство объекта:
btnNext: “.next”
Это свойство передает в виде строки JQuery селектор. Теперь нажимая на ссылку класса .next мы сможем переключать объекты карусели с лева на право. Потренируйтесь с обратным свойством btnPrev, оно определяет объект переключающий элементы карусели в обратном порядке. При передаче нескольких параметров объекта, перечисляйте их через запятую. Одним из интересных свойств, на мой взгляд, является autoplay, со значениями true и false. Оно отвечает за автоматическое переключение слайдов. При установке autoplay возникает необходимость в свойстве duration, оно измеряется в миллисекундах, и назначает время, которое должно пройти до переключения на следующий слайд.
Полный список свойств можно увидеть тут.
Спасибо, что прочитали урок до конца!
Автор: GusakovNick
Спасибо, очень хорошая и понятная статья.
Подскажите, пожалуйста, как btnNext: “.next” заставить передвигать карусель на один пункт ?