Слайдер Owl Carousel

Reading time ~5 minutes

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

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

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

1
v1.3.2
, но на странице упоминается о версии
1
2.0.0-beta
. Для своей работы плагин требует библиотеки jQuery версии не ниже
1
1.7
.

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

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

1
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  -->

В

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

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

1
owl-carousel
, к которому будет производиться привязка стилей из файла
1
owl.carousel.css
.

В конце тела

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

Базовая конфигурация js-файла

1
settings.js
выглядит следующим образом:

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

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

Базовый вариант слайдера OWL Carousel

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

К примеру, переменная

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

items: 5

Переменные

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

itemsDesktop: [1199,4]

Переменная

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

singleItem: false

Переменные

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

navigation: true,
pagination: true

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

1
autoPlay
:

autoPlay: true

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

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

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

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

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

Слайдер OWL Carousel с эффектом transition

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

Заключение

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


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017