плагин owl carousel

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+

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

Опция Тип данных По умолчанию Описание
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 настройки, а также все возможные примеры использования плагина.

29641 просмотров
Телеграм-канал JavaScript Daily Practice