Самый известный из всех jQuery плагинов для созданием «карусели». Идеальный вариант компактного слайдера для любого контента.
Update: Статья обновлена, актуальная версия плагина — 2+. Первая версия не поддерживается автором плагина.
Использование плагина OWL Carousel можно увидеть на множестве сайтов. Он легкий, удобный и функциональный. Имеет адаптивный дизайн, что немаловажно сегодня. Библиотека предоставляется с открытым исходным кодом, а авторы предлагают подробнейший мануал по использованию.
На момент написание данной статьи, демо-страница плагина недоступны, и посмотреть OWL Carousel настройки затруднительно. Возможно, в дальнейшем отображение сайта разработчика будет восстановлена. Ну а мы пока предоставим мануал по использованию плагина со средним содержанием.
Установка плагина
Все исходники плагина находятся в официальном архиве из репозитория на Github (ссылка «Скачать» вверху страницы). В нем располагается папка owl-carousel, которая и содержит все необходимые файлы. Рекомендуем извлечь к себе на сервер все файлы из этой папки (кроме, разве что, не компрессированной версии).
Подключаем обязательные файлы стилей и скриптов:
Для версий 1+
<!-- Базовые стили --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Тема по умолчанию --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- Сам плагин JS --> <script src="owl-carousel/owl.carousel.js"></script>
Для версий 2+
<!-- Базовые стили --> <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> <!-- Тема по умолчанию --> <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> <script src="jquery.min.js"></script> <!-- Сам плагин JS --> <script src="owlcarousel/owl.carousel.min.js"></script>
Разметка HTML (актуальна для обоих версий)
Настройки OWL Carousel не подразумевают под собой какую-то конкретную разметку по коду. Вы можете применять плагин к любым тегам, главное, чтобы сохранялась следующая структура:
<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> ... </div>
Класс owl-carousel в данном фрагменте служит идентификатором для того, чтобы плагин начал обрабатывать блок, как слайдер. Теоретически, все прямые дочерние элементы будут отдельным слайдами.
Начало работы плагина (актуальна для обоих версий)
Для запуска скрипта достаточно просто объявить его:
$(document).ready(function() {
$(".owl-carousel").owlCarousel();
});
Все. После этого Вы уже можете увидеть работу слайдера.
OWL Carousel настройки
Чаще всего требуется кастомизировать работу «карусели» и обозначить параметры под себя. Для этого создано большое количество опций, callback`ов, событий и методов. Мы перечислим лишь самые популярные и необходимые. Вот, что использует плагин OWL Carousel по умолчанию:
Для версий плагина 1+
$("#owl-example").owlCarousel({
// Наиболее важные особенности
items : 5,
itemsCustom : false,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,3],
itemsTablet: [768,2],
itemsTabletSmall: false,
itemsMobile : [479,1],
singleItem : false,
itemsScaleUp : false,
//Базовая скорость
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Автозапуск слайдов
autoPlay : false,
stopOnHover : false,
// Навигация (вперед-назад)
navigation : false,
navigationText : ["prev","next"],
rewindNav : true,
scrollPerPage : false,
//Пагинация (слайд 1,2,3...)
pagination : true,
paginationNumbers: false,
// Адаптивность
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS стили
baseClass : "owl-carousel",
theme : "owl-theme",
//Lazy load (для изображений)
lazyLoad : false,
lazyFollow : true,
lazyEffect : "fade",
//Автоматическое определение высоты блоков
autoHeight : false,
//JSON
jsonPath : false,
jsonSuccess : false,
//События мышки
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
//Transitions
transitionStyle : false,
// Другое
addClassActive : false,
//Callbacks
beforeUpdate : false,
afterUpdate : false,
beforeInit: false,
afterInit: false,
beforeMove: false,
afterMove: false,
afterAction: false,
startDragging : false
afterLazyLoad : false
})
Для версий плагина 2+
В список включены также опции от встроенных плагинов.
| Опция | Тип данных | По умолчанию | Описание |
|---|---|---|---|
| items | Number | 3 | Количество элементов, которые вы хотите увидеть на экране. |
| margin | Number | 0 | Отступ в пикселях справа от слайда. |
| loop | Boolean | false | Бесконечная прокрутка элементов. |
| center | Boolean | false | Отцентровать элемент. Хорошо работает даже с нечетным количеством элементов. |
| mouseDrag | Boolean | true | Включение перетягивания слайдов мышью. |
| touchDrag | Boolean | true | Включение перетягивания слайдов на тач-скрине. |
| pullDrag | Boolean | true | Возможность тянуть слайды за границы. |
| freeDrag | Boolean | false | Тоже, только к отдельному слайду. |
| stagePadding | Number | 0 | Отступы слева и справа (чтобы видеть соседние слайды). |
| merge | Boolean | false | Слияние элементов. Ищет data-merge='{number}’ внутрли элемента… |
| mergeFit | Boolean | true | Выбираются объединенные элементы, если экран меньше, чем значение элемента. |
| autoWidth | Boolean | false | Автоматический подбор ширины. Попробуйте использовать свойства ширины в атрибуте style. |
| startPosition | Number/String | 0 | Стартовая позиция или URL хэш-строка ‘#id’. |
| URLhashListener | Boolean | false | Реагировать на изменение хэша URL. |
| nav | Boolean | false | Выводит кнопки вперед\назад. |
| rewind | Boolean | true | Вернуться назад, когда граница карусели достигнута. |
| navText | Array | [‘next’,’prev’] | Текст для кнопок. Поддерживает HTML. |
| navElement | String | div | Тип элемента DOM для одной направленной навигационной ссылки. |
| slideBy | Number/String | 1 | Навигация по слайдам x.’страница’. |
| dots | Boolean | true | Показывать точки навигации. |
| dotsEach | Number/Boolean | false | Показывать точки каждого элемента X. |
| dotData | Boolean | false | Использование data-dot содержимого. |
| lazyLoad | Boolean | false | «Ленивая» загрузка изображений. |
| autoplay | Boolean | false | Автовоспроизведение. |
| autoplayTimeout | Number | 5000 | Задержка для автовоспроизведения. |
| autoplayHoverPause | Boolean | false | Пауза при наведении. |
| smartSpeed | Number | 250 | Рассчет скорости. Бета. |
| fluidSpeed | Boolean | Number | Рассчет скорости. Бета. |
| autoplaySpeed | Number/Boolean | false | Скорость автовоспроизведения. |
| navSpeed | Number/Boolean | false | Скорость навигации. |
| dotsSpeed | Boolean | Number/Boolean | Скорость пагинации. |
| dragEndSpeed | Number/Boolean | false | Скорость при «отпускании» слайда. |
| callbacks | Boolean | true | Включение событий коллбеков. |
| responsive | Object | empty object | Объект для опций адаптивности. |
| responsiveRefreshRate | Number | 200 | Адаптивная частота обновления. |
| responsiveBaseElement | DOM element | window | Указывает на любой DOM элемент. |
| video | Boolean | false | Включение выборки с видео-сервисов. |
| videoHeight | Number/Boolean | false | Установка высоты для видео. |
| videoWidth | Number/Boolean | false | Установка ширины для видео. |
| animateOut | String/Boolean | false | Класс для CSS3 анимации исчезновения. |
| animateIn | String/Boolean | false | Класс для CSS3 анимации появления. |
| info | Function | false | Обратный вызов для получения базовой информации (текущий элемент/страница/ширина). |
| nestedItemSelector | String/Class | false | Используйте его, если элементы карусели глубоко вложены в какой-то сгенерированный контент. Не используйте точку перед именем класса. |
| itemElement | String | div | Тип DOM-элемента для слайда. |
| stageElement | String | div | Тип DOM-элемента для шага прокрутки. |
| navContainer | String/Class/ID/Boolean | false | Устанавливает ваш собственный контейнер для навигации. |
| dotsContainer | String/Class/ID/Boolean | false | Устанавливает ваш собственный контейнер для пагинации. |
Скачать плагин версии 2+ можно по ссылке выше.
В случае, если вам нужно посмотреть демо страницу версии 1+, то ее сохранённую копию можно посмотреть из интернет-архива — http://web.archive.org/web/20161022044941/http://owlgraphic.com/owlcarousel/
Там Вы найдете подробные OWL Carousel настройки, а также все возможные примеры использования плагина.
