Owl Carousel jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).

Owl Carousel - jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).

ДЕМО-ПРИМЕРЫ

Загружаем jQuery и подключаем файлы плагина Owl Carousel

Для использования Owl Carousel необходимо подключить jQuery 1.7 или выше и owl.

HTML

        <!-- Важно Owl стили -->
    <link rel="stylesheet" href="/owl-carousel/owl.carousel.css">
     
    <!-- Тема по умолчанию -->
    <link rel="stylesheet" href="/owl-carousel/owl.theme.css">
     
    <!-- jQuery 1.7+ -->
    <script src="jquery-1.9.1.min.js"></script>
     
    <!-- Подключаем js плагина -->
    <script src="assets/owl-carousel/owl.carousel.js"></script>

Настраиваем HTML

Вас не потребуется специальная разметка. Все что вам потребуется это обернуть ваш div’ы (owl работает с любым типом элементов) элементом-контейнером <div class="owl-carousel">. Класс "owl-carousel" обязателен, если используются стили, которые лежат в файле owl.carousel.css.

HTML

    <div id="owl-example" class="owl-carousel">
    <div> Ваш контент </div>
    <div> Ваш контент </div>
    <div> Ваш контент </div>
    <div> Ваш контент </div>
    <div> Ваш контент </div>
    <div> Ваш контент </div>
    <div> Ваш контент </div>
    ...
</div>

Вызываем плагин

Теперь вызываем функцию инициализации плагина owl и ваша карусель готова.

jQuery

    $(document).ready(function() {
 
    $("#owl-example").owlCarousel();
 
});

Опции

Ниже приведены все опции доступные для настройки плагина jQuery Owl Carousel.

Функции обратного вызова

Настройки по умолчанию

jQuery

    $("#owl-example").owlCarousel({
     
    // Наиболее важные особенности owl
    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,
     
    // Пагинация
    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,
     
    // Функции обратного вызова
    beforeUpdate : false,
    afterUpdate : false,
    beforeInit: false,
    afterInit: false,
    beforeMove: false,
    afterMove: false,
    afterAction: false,
    startDragging : false
    afterLazyLoad : false
     
})

Пользовательские События

Owl Carousel обрабатывает несколько основных базовых событий. Главным образом используются для навигации пользователя. Пример

      "owl.prev"   // переходим к предыдущему
  "owl.next"   // переходим к следующему
  "owl.play"   // авто-прокрутка, также это 
               // событие принимает вторым параметром скорости авто-прокрутки 
  "owl.stop"   // стоп
  "owl.goTo"   //переход к заданному элементу
  "owl.jumpTo" // прыжоккзаданномуэлементу. Без анимации.

Методы Owl

    // инициализация плагина
$(".owl-carousel").owlCarousel()
 
// получаем экземпляр объекта carousel и сохраняем его в переменной owl
var owl = $(".owl-carousel").data('owlCarousel');
 
// Публичные методы
owl.next()      // переходим к следующему слайду
owl.prev()      // переходим к предыдущему слайду
owl.goTo(x)     // переходим к x слайду
owl.jumpTo(x)   // прыжок к заданному(x) слайду. Без анимации.
 
// авто-прокрутка
owl.play() // авто-прокрутка
owl.stop() // авто-прокрутка стоп
 
// манипуляция методами
owl.addItem(htmlString [,targetPosition])
owl.removeItem(targetPosition)
owl.destroy()
owl.reinit(newOptions)