Pull to refresh

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

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

Спасибо, что прочитали урок до конца!
Tags:
Hubs:
Total votes 17: ↑10 and ↓7+3
Comments5

Articles