Встретил на Google+ упоминание о плагине под jQuery для создания карусели - OWL Carousel.

Попробовал с ним разобраться и посмотреть примеры создания слайдеров на официальной странице. Могу сказать, что я впечатлен данным скриптом и его возможностями. Слайдер адаптивный, имеет множество настроек, обладает хорошими эффектами “из коробки”. Мое личное мнение - отличный выбор для применения на практике!

Официальная страница проекта располагается здесь - OWL Carousel. Стабильная версия скрипта на данный момент - v1.3.2, но на странице упоминается о версии 2.0.0-beta. Для своей работы плагин требует библиотеки jQuery версии не ниже 1.7.

Ниже я попробую создать простой вариант карусели с помощью плагина OWL Carousel. Более интересные и продвинутые варианты, я думаю, показывать не имеет смысла. По той простой причине, что разобравшись с базовым вариантом, всегда можно его улучшить. И для этой цели как ничто лучше подойдут примеры на официальной странице - Demo и More Demo. Стоит сказать, что для себя я увидел там готовые решения практически на все случаи жизни.

Подключение OWL Carousel

Для подключения плагина OWL Carousel к готовому проекту необходимо получить архив плагина с официальной страницы - OWL Carousel или с GitHub - OwlCarousel. В архиве имеется все, что необходимо - библиотека jQuery, плагин owl.carousel.min.js, готовые CSS-стили для карусели. Ничего сложного или необычного в подключении плагина OWL Carousel нет - все стандартно.

HTML-разметка и подключение скрипта будут выглядеть следующим образом:

<ul id="carousel" class="owl-carousel carousel">
  <li><img src="images/owl1.jpg" width="300" height="200" alt="Owl_1" /></li>
  <li><img src="images/owl2.jpg" width="300" height="200" alt="Owl_2" /></li>
  <li><img src="images/owl3.jpg" width="300" height="200" alt="Owl_3" /></li>
  <li><img src="images/owl4.jpg" width="300" height="200" alt="Owl_4" /></li>
  <li><img src="images/owl5.jpg" width="300" height="200" alt="Owl_5" /></li>
  <li><img src="images/owl6.jpg" width="300" height="200" alt="Owl_6" /></li>
  <li><img src="images/owl7.jpg" width="300" height="200" alt="Owl_7" /></li>
  <li><img src="images/owl8.jpg" width="300" height="200" alt="Owl_8" /></li>
</ul>
<!--  SCRIPTS  -->

В head подключаются две готовых CSS-таблицы из архива - owl.carousel.css и owl.theme.css. Таблица style.css - опциональная, для настройки плагина под конкретные условия.

Тип HTML-элементов для создания разметки слайдера, по большому счету, не имеет особого значения, так как скрипт OWL Carousel умеет работать со всеми типами. Главное, чтобы у блока-обертки имелся обязательный класс owl-carousel, к которому будет производиться привязка стилей из файла owl.carousel.css.

В конце тела body документа подключаются библиотека jQuery, скрипт плагина OWL Carousel и файл настроек данного скрипта.

Базовая конфигурация js-файла settings.js выглядит следующим образом:

$(document).ready(function() {
  $("#carousel").owlCarousel();
});

Все, можно смотреть на готовый (слегка подредактированный) результат:

Настройка плагина OWL Carousel

Скрипт OWL Carousel имеет большое количество настроек, которые добавляются или убираются в файле настроек. Ссылка на страницу с полным списком настроек располагается здесь - Customizing OWL Carousel.

К примеру, переменная items задает количество одновременно показываемых в слайдере изображений:

items: 5

Переменные itemsDesktopSmall, itemsTablet, itemsTabletSmall, itemsMobile устанавливают количество одновременно отображаемых изображений в зависимости от размера окна браузера. Например, запись вида itemsDesktop: [1199,4] “говорит” браузеру, что при размере окна меньше или равному 1199px следует отображать одновременно только четыре изображения:

itemsDesktop: [1199,4]

Переменная singleItem устанавливает, отображать ли только одно изображение в слайдере или несколько:

singleItem: false

Переменные navigation и pagination управляют возможностью включения или выключения навигации\пагинации у слайдера:

navigation: true,
pagination: true

Автоматическая прокрутка изображений в слайдере включается с помощью переменной autoPlay:

autoPlay: true

Имеются множество других настроек плагина OWL Carousel, с которыми можно легко разобраться на официальной странице. Все перечислять здесь я не буду.

Варианты слайдера OWL Carousel

Стоит “побродить” по странице с демонстрационными примерами работы плагина OWL Carousel. Там есть на что посмотреть и что подобрать для себя.

Мне понравились примеры создания слайдеров - Lazy Load и Auto Height.

Наиболее интересные (для меня) примеры расположены в списке со ссылками.

К примеру, по ссылке CSS3 Transitions располагается образец слайдера с эффектом перехода, основанном на CSS3-свойстве transition. Более того, из выпадающего списка можно прямо на странице подобрать себе подходящий эффект - своеобразный конструктор получается:

Или пример создания слайдера с расположенной вверху полосой progress bar - Progress Bar.

Заключение

Плагин OWL Carousel мне понравился и я буду стараться применять его на практике, при верстке страниц.