Roundabout — фреймворк для создания карусели на основе JQuery

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

Спасибо, что прочитали урок до конца!