Скачав и распаковав 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) или же целые функции.
| Параметр | Тип | Стандарт | Описание |
|---|---|---|---|
| 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 если элемент не является |
| 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 с комментариями:
$(document).ready(function() {
$('#carouselOne').owlCarousel({
loop:true, //Зацикливаем слайдер
margin:50, //Отступ от элемента справа в 50px
nav:true, //Отключение навигации
autoplay:true, //Автозапуск слайдера
smartSpeed:1000, //Время движения слайда
autoplayTimeout:2000, //Время смены слайда
responsive:{ //Адаптивность. Кол-во выводимых элементов при определенной ширине.
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
});
});Чтобы сделать два или несколько слайдеров на сайте с помощью Owl Carousel 2 достаточно просто вызывать функцию не по классу а по id (как в моем примере), и не забудьте их расставить непосредственно в разметке страницы.