Адаптивный слайдер на сайт на примере Owl Carousel 2

Адаптивный слайдер для сайта на примере Owl Carousel 2 http://owlcarousel2.github.io/OwlCarousel2/ С тех пор как появились адаптивные сайты к различным мобильным устройствам, для многих web мастеров встала задача адаптации слайдера на сайте, т.к. зачастую слайдеры прошлого поколения были совсем не адаптивны. Одним из адаптивных слайдеров стал OWL Carousel v. 1.x.x. В данной статье мы будем рассматривать OWL Carousel 2, она не совместима с предыдущей версией OWL Carousel. Смысл этих плагинов остается такой же, и она имеет много общего с OWL Carousel но основной код был переписан с нуля, добавились новые функции. И так начнем, рассмотрим новые возможности OWL Carousel 2.

Установка слайдера OWL Carousel 2 на сайт

Подключаем стили CSS

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Подключаем Jquery и сам плагин карусели

<script src="jquery-1.11.2.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Мои настроки слайдера

$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        loop:true, //Зацикливаем слайдер
        margin:10, //Отступ от картино если выводите больше 1
        nav:false, //Отключил навигацию
        autoplay:true, //Автозапуск слайдера
        smartSpeed:1000, //Время движения слайда
        autoplayTimeout:2000, //Время смены слайда
        responsive:{ //Адаптация в зависимости от разрешения экрана
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    });
});

Разметка HTML для слайдера

<div class="owl-carousel">
    <div class="item"><img src="./img/content/owl/1.jpg" alt=""></div>
    <div class="item"><img src="./img/content/owl/2.jpg" alt=""></div>
    <div class="item"><img src="./img/content/owl/3.jpg" alt=""></div>
    <div class="item"><img src="./img/content/owl/4.jpg" alt=""></div>
</div>

После подключения CSS стилей OWL Carousel 2, подключаем библиотеки JQuery и плагина OWL Carousel 2, создаем HTML разметку с нужными слайдами. Пример работы слайдера.

Список включая все варианты от встроенных плагинов видео, ленивой загрузки, авто высоты и анимации.

Данный пример того, как визуализируется HTML. С помощью следующих параметров вы можете изменить почти каждый класс, как вы хотите

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>

Events

События, предусмотренные Owl Carousel в стратегических местах кода. Это дает вам возможность прослушивать любые изменения в действии карусели и использовать события для реализации своих действий.

Пример кода для отлавливания события при смене слайда в OWL Carousel

var owl = $('.owl-carousel');
owl.owlCarousel();
// Слушаем измитения в OWL
owl.on('changed.owl.carousel', function(event) {
    ...
})

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

var owl = $('.owl-carousel');
owl.owlCarousel();
// Переключаем слайд вперед
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Переключаем слад назад
$('.customPrevBtn').click(function() {
    // Устанавливаем параметр скорости
    // Параметр должен быть заключен в кавдрадные скобки '[]'
    owl.trigger('prev.owl.carousel', [300]);
})

Callbacks

Вы также можете использовать функцию обратного вызова Callbacks для своих нужд

$('.owl-carousel').owlCarousel({
    onDragged: callback
});
function callback(event) {
    ...
}

Data

Каждое событие имеет очень полезную информацию в объекте события. Основывайтесь на приведенном выше примере:

    function callback(event) {
        // По основным
        // DOM элемент, например .owl-carousel
        var element   = event.target;
        // Имя события, например dragged
        var name      = event.type;
        // Пространство имен события, например owl.carousel
        var namespace = event.namespace;
        // Количество элементов
        var items     = event.item.count;
        // Позиция текущего элемента
        var item      = event.item.index;
        // Плагин навигации карусели
        // Количество страниц
        var pages     = event.page.count;
        // Положение текущей страницы
        var page      = event.page.index;
        // Количество элементов на странице
        var size      = event.page.size;
    }