Owl Carousel 2 — плагин для слайдера/карусели

Частая задача при разработке сайтов, это создание слайдера изображений, баннеров или карусели товаров. Для этих задач я использую плагин для jQuery — Owl Carousel 2.

Плагин обладает огромным количеством настроек, он адаптивен под разные размеры экрана, совместим со всеми современными браузерами (да и многими устаревшими, но до сих пор используемыми).

Ниже описание его подключения к сайту и несколько примеров настройки.

Подключение очень простое, скачиваем плагин с официального сайта https://owlcarousel2.github.io/OwlCarousel2/, разархивируем файлы.

Теперь к нашей странице нужно подключить стили:

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

owl.carousel.min.css — это обязательный файл, его нужно подключать всегда.

owl.theme.default.min.css — это файл с дефолтной темой, по желанию можно создать свою тему, в комплекте идут файлы SCSS.

Далее подключаем сам плагин (обязательно после подключения jQuery).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

Все, мы подключили Owl Carousel 2  к нашей странице.

Далее, там где мы хотим отобразить слайдер, добавляем:

<div class="owl-carousel owl-theme">
    <div> Слайд 1 </div>
    <div> Слайд 2 </div>
    <div> Слайд 3 </div>
    <div> Слайд 4 </div>
</div>

Класс owl-theme мы добавили потому что используем тему owl.theme.default, которую подключили выше.

В качестве содержания слайда может быть все что угодно (фото, видео с Youtube, блоки информации), главное обернуть это в контейнер (например div).

Далее просто добавляем вызов функции плагина и необходимые настройки (их можно вынести в отдельный файл, например scripts.js и подключать к странице). Только обязательно после подключения owl.carousel.min.js

<script>
    $(document).ready(function(){
        $(".owl-carousel").owlCarousel({
            // тут настройки плагина
        });
    });
</script>

Слайдер должен работать.

Настройки плагина

Ниже небольшой пример работы плагина Owl Carousel 2 с настройками.

Например мы хотим сделать карусель фотографий, чтобы они отображались по две штуки за раз на обычных экранах и по одной на маленьких (например на смартфонах).

Для красоты сделаем отступ между фотографиями, а так же сделаем карусель зацикленной. Смена слайдов должна запускаться автоматически и задержка смены слайдов должна составлять 3 секунды.

Вызов функции Owl Carousel 2 с настройками будет выглядеть так:

$(document).ready(function(){
        $(".owl-carousel").owlCarousel({
	// автозапуск
	autoplay: true,
	// время задержки
	autoplayTimeout:2000,
	// отступ справа
            margin: 15,
	// зацикливаем
            loop: true,
	// адаптивность
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:2
              }
    }
        });
    });

В данном случае настройка responsive указывает:

На ширине экрана от 0 до 768px – выводим 1 элемент, от 768px до 1180px – выводим 2 элемента и на ширине экрана больше 1180px – тоже выводим 2 элемента карусели.

Вот как это выглядит:

See the Pen Owl Carousel 2 by Alex Tretyakov (@tretyakov) on CodePen.

Полный список опций приведен на официальном сайте https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

При необходимости добавления нескольких слайдеров на страницу не забудьте указать им разный id.

Анимация слайдера Owl Carousel 2

Можно добавлять различные эффекты для перехода между слайдами. Для этого будем использовать библиотеку Animate.css https://daneden.github.io/animate.css/.

Скачиваем библиотеку и добавляем к странице файл animate.css

<link rel="stylesheet" href="css/animate.css">

Далее необходимо указать в опциях animateOut (исчезновение слайда) и animateIn (появление слайда) название CSS классов для эффектов перехода.

See the Pen Owl Carousel 2 animation by Alex Tretyakov (@tretyakov) on CodePen.

jqueryJS