OWL Carousel — популярный jQuery плагин + настройки для v. 2+

Самый известный из всех 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+

В список включены также опции от встроенных плагинов.

Скачать плагин версии 2+ можно по ссылке выше.

В случае, если вам нужно посмотреть демо страницу версии 1+, то ее сохранённую копию можно посмотреть из интернет-архива — http://web.archive.org/web/20161022044941/http://owlgraphic.com/owlcarousel/

Там Вы найдете подробные OWL Carousel настройки, а также все возможные примеры использования плагина.