Готовая карусель на jQuery. Обзор плагина Owl Carousel 2.

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

Ссылка на плагин — https://owlcarousel2.github.io/OwlCarousel2/

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

Для начала нам нужно подключить библиотеку jQuery и сам плагин. Файлы плагина вы можете подключить по ссылке которая представлена выше.

<!--ПОДКЛЮЧАЕМ JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--ПОДКЛЮЧАЕМ Owl Carousel 2-->
<script src="../OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>

HTML

Создаем элемент с классами .owl-carousel .owl-theme , внутри него прописываем элементы с классами .item — это будут наши слады в карусели. Во внутрь данных классов мы прописываем изображения или любой HTML код, который нужно отобразить.

<div class="owl-carousel owl-theme">
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
    <div class="item"><figure><img src="" alt=""></figure></div>
</div>

JavaScript (jQuery)

В самом низу прописываем JavaScript код с параметрами для карусели.

$('.owl-carousel').owlCarousel({
    loop:true, //запускает циклическую прокрутку для карусели
    margin:10, //задает внешние отступы для слайдов
    nav:true, //отображает флажки для быстрого переключения по слайдам
    
/*свойство responsive позволяет задать параметры которые будут меняться только для определенной ширины экрана, например количество одновременно отображающихся слайдов для разной ширины экрана. Ширина задается числовым значением и обязательно в px*/
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Вот так просто добавляется карусель с помощью плагина Owl Carousel 2. Теперь давайте рассмотрим дополнительные параметры.

Дополнительные параметры

responsive — параметры которые будут выполняться для определенной ширины экрана.

responsive : {
    // для 0px и шире
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // для 480px и шире
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // для 720px и шире
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
}

merge — указывает размер ячейки

Для того чтобы задать ширину блока относительно других блоков, необходимо добавить для блока атрибут data-merge=""

<div class="owl-carousel owl-theme">
    <div class="item" data-merge="1"><h2>1</h2></div>
    <div class="item" data-merge="2"><h2>2</h2></div>
    <div class="item" data-merge="1"><h2>3</h2></div>
    <div class="item" data-merge="3"><h2>4</h2></div>
    <div class="item" data-merge="6"><h2>6</h2></div>
    <div class="item" data-merge="2"><h2>7</h2></div>
    <div class="item" data-merge="1"><h2>8</h2></div>
    <div class="item" data-merge="3"><h2>9</h2></div>
</div>

С помощью параметра mergeFit вы можете включать или отключать свойство marge для разной ширины экрана.

$('.owl-carousel').owlCarousel({
    items:5,
    loop:true,
    margin:10,
    merge:true,
    responsive:{
        678:{
            mergeFit:true
        },
        1000:{
            mergeFit:false
        }
    }
});

lazyLoad — ленивая загрузка для изображений каруселей

Для изображений нужно добавить класс .owl-lazy и ссылку на изображение добавлять в атрибут data-src.

<div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
</div>

Так же нужно добавить дополнительный параметр lazyLoad:true, который активирует ленивую загрузку.

$('.owl-carousel').owlCarousel({
    items:4,
    lazyLoad:true,
    loop:true,
    margin:10
});

autoplay — автовоспроизведение карусели

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true, //запускает автовоспроизведение
    autoplayTimeout:1000, //указывает время переключения слайдов
    autoplayHoverPause:true
});

Так же вы можете создать кнопки для включения и отключения автовоспроизведения.

$('.play').on('click',function(){
    owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
    owl.trigger('stop.owl.autoplay')
})