#длясамыхмаленьких — Установка и настройка слайдера Owl Carousel 2 на сайт
А вот и подоспела очередная рубрика в моем блоге — #длясамыхмаленьких . В ней я буду рассказывать вам о простых вещах из мира веб-разработки доступным языком (попытаюсь во всяком случае). Сегодня мы поговорим о такой банальной вещи как слайдер. Скорее всего на подавляющем количестве сайтов в том или ином виде присутствует этот элемент. Он позволяет запихать большой объем данных в ограниченное по размеру место, да и в целом способов его применения масса.
За свою жизнь я перепробовал кучу всевозможных слайдеров и в качестве основного у меня всегда был «FlexSlider 2» до того момента пока я не попробовал героя нашей сегодняшней записи — Owl Carousel 2.
Owl Carousel 2 — Гибкий, приятный и удобный в использовании слайдер. Он интуитивно понятно себя ведет, адаптивен, замечательно себя чувствует на любых платформах и разрешениях. Использовать его в работе — одно удовольствие.
Установка Owl Carousel 2
Собсно для начала нам нужно его скачать. Пакет доступен из npm и bower:
npm npm install --save owl.carousel
bower bower install --save owl.carousel
Если вы не хипстер используете пакетные менеджеры, то можно скачать с гитхаба в разделе релизов: Скачать Owl Carousel 2
На момент написания статьи актуальная версия 2.1.6 и в качестве примера я буду использовать ее.
Само собой нам так же понадобиться jQuery.
Подключаем
Скачав и распаковав Owl Carousel 2 нам нужно его подключить. Для этого в <head> добавляем стили:
<link rel="stylesheet" href="Путь-до-папки-со-стилями/owl.carousel.min.css" />
Если вам лень писать свои стили для внешнего вида слайдера, то можете подключить CSS файл со стандартной темой от разработчиков.
<link rel="stylesheet" href="Путь-до-папки-со-стилями/owl.theme.default.css" />
И внизу страницы подключаем непосредственно саму js’ку. АЛЯРМА! Owl Carousel должен подключаться после jQuery!
<script src="Путь-до-папки-с-js/owl.carousel.min.js"></script>
Используем
Добавляем в нужное вам место на странице блок со слайдером
<div class="owl-carousel owl-theme">
<div> Контент </div>
<div> Контент </div>
<div> Контент </div>
<div> Контент </div>
<div> Контент </div>
<div> Контент </div>
<div> Контент </div>
</div>
Содержимым слайдера может выступать что угодно. Картинки, текст, списки, видео, все на что хватит вашей фантазии, но оно обязательно должно быть обернуто в контейнер (Например <div> или <ul>)
Если вы не используете стандартную тему (owl.theme.default.css) то класс owl-theme добавлять не нужно.
Теперь просто вызываем функцию плагина (добавляем следующий код в конце странице, после подключения owl.carousel.min.js)
<script>$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});</script>
Если у вас уже есть вызовы других функций по
(document).ready, то можно просто к ним добавить$('.owl-carousel').owlCarousel();)
Все! Карусель установлена и функционирует. Вы молодец!
Настраиваем и расширяем функционал
У плагина достаточно простое и понятное API с помощью которого можно задавать опции к вызову нашей карусели. Ниже я приведу их подробную таблицу с русским описанием и приложу пример моего использования его на последнем разрабатываемом мной проекте, для наглядности.
Табличка вышла не маленькая и перевод получился немного не полный, но самое важное и постоянно используемое я перевел. Как только у меня будет чуть больше свободного времени я обязательно доведу перевод на русский язык документации по Owl Carousel 2 до конца.
Дабы предупредить некоторые глупые вопросы у людей которые не знают ничего о типах данных — сделаю небольшой дисклеймер. В таблице приведен параметр и тип значения в котором нужно его указывать. Тип Number используется как ни странно для числовых значений, как целых так и дробных (например 1, 5, 80). Тип Boolean является булевым и имеет два значения — true (истина) или false (ложь) (грубо говоря да\нет). String это строчный тип данных, в который вы можете записывать любую строку (оборачивается как в одинарные так и в двойные кавычки). Так же в параметр можно передавать и другие данные, например массивы (Array) или же целые функции.
Документация по API Owl Carousel 2 на русском
| Параметр | Тип | Стандартное значение | Описание |
|---|---|---|---|
| items | Number | 3 | Кол-во отображаемых элементов в слайдере |
| margin | Number | 0 | Отступ справа у элементов внутри слайдера (значение в px) |
| loop | Boolean | false | Бесконечное зацикливание слайдера (для лучшего эффекта продублируйте первый и последний элемент) |
| center | Boolean | false | Позиционирование элементов по центру (лучше работает при нечетном кол-ве элементов) |
| mouseDrag | Boolean | true | Перелистывание элементов зажатой мышкой |
| touchDrag | Boolean | true | Перелистывание касанием (смартфоны\планшеты) |
| pullDrag | Boolean | true | Stage pull to edge. |
| freeDrag | Boolean | false | Item pull to edge. |
| stagePadding | Number | 0 | Padding left and right on stage (can see neighbours). |
| merge | Boolean | false | Merge items. Looking for data-merge='{number}’ inside item.. |
| mergeFit | Boolean | true | Fit merged items if screen is smaller than items value. |
| autoWidth | Boolean | false | Размещение элементов не сеткой (Задайте высоту каждому диву) |
| startPosition | Number/String | 0 | Стартовая позиция (?) или URL хэш (Например «#id») |
| URLhashListener | Boolean | false | Отслеживание изменений URL хэша (Хэш должен присутствовать на каждом элементе) |
| nav | Boolean | false | Отображение кнопок вперед\назад |
| navText | Array | Текст на кнопках навигации. HTML разрешен. | |
| navElement | String | div | Тип DOM элемента для навигационной ссылки в одну сторону. |
| slideBy | Number/String | 1 | Пролистывание слайдера по оси X. Значение ‘page’ позволяет сделать навигацию по странице. |
| dots | Boolean | true | Отображение навигационных «точек» |
| dotsEach | Number/Boolean | false | Отображение навигационных «точек» ‘x’ кол-во элементов |
| dotData | Boolean | false | Используется data-dot контентом |
| lazyLoad | Boolean | false | Lazy-Load картинок. data-src и data-src-retina указываются для высоких разрешений. Так же загружает изображение инлайново в свойство background если элемент не является <img> |
| lazyContent | Вырезано из финальной версии, но разработка все еще ведется. | ||
| autoplay | Boolean | false | Автоматическое пролистывание |
| autoplayTimeout | Number | 5000 | Интервалы между пролистыванием элементов |
| autoplayHoverPause | Boolean | false | Останавливает автопроигрывание если навести мышкой (hover) на элемент |
| smartSpeed | Number | 250 | Просчитывание скорости (В оф. документации больше информации нет) |
| fluidSpeed | Number | ||
| autoplaySpeed | Number/Boolean | false | Скорость автоматического пролистывания |
| navSpeed | Number/Boolean | false | Скорость навигации |
| dotsSpeed | Number/Boolean | Скорость навигации «точками» | |
| dragEndSpeed | Number/Boolean | false | Drag end speed. |
| callbacks | Boolean | true | Включение\отключение колбэк ивентов. |
| responsive | Object | empty object | Объект содержит в себе настройки для адаптивности. Если установить значение в false — поддержка адаптивности отключается. |
| responsiveRefreshRate | Number | 200 | Responsive refresh rate. |
| responsiveBaseElement | DOM element | window | Вешается на любой DOM элемент. Если вы хотите поддержку старых браузеров (например ie8) вешайте его на главный оберточный элемент (wrapper). Это должно предупредить неадекватный ресайз. |
| video | Boolean | false | Включение\отключение поддержки в слайдере видео (youtube\vimeo\Vzaar) |
| videoHeight | Number/Boolean | false | Установка высоты видео |
| videoWidth | Number/Boolean | false | Установка ширины видео |
| animateOut | String/Boolean | false | CSS класс анимации «out» |
| animateInClass | String/Boolean | false | CSS класс анимации «in» |
| fallbackEasing | String | swing | Смягчение (?) CSS2 $.animate. |
| info | Function | false | Колбэк для извлечение базовой информации (текущий элемент/страницы/ширины). |
| nestedItemSelector | String/Class | false | Используйте если элемент слайдера глубоко вложен в генерируемый контент, например ‘myitem’. Не используйте точку перед названием класса. |
| itemElement | String | div | Тип DOM элемента слайдера. |
| stageElement | String | div | Тип DOM элемента owl-stage. |
| navContainer | String/Class/ID/Boolean | false | Установка своего контейнера для навигации |
| dotsContainer | String/Class/ID/Boolean | false | Установка своего контейнера для навигации по «точкам» |
Вот пример моего вызова Owl Carousel 2 с комментариями:
Чтобы сделать два или несколько слайдеров на сайте с помощью Owl Carousel 2 достаточно просто вызывать функцию не по классу а по id (как в моем примере), и не забудьте их расставить непосредственно в разметке страницы.
На этом собственно все, если у вас останутся какие-то вопросы — задавайте их в комментариях. Удачи!