Owl Carousel 2

Сайт проекта: https://owlcarousel2.github.io/OwlCarousel2/

GitHub: https://github.com/OwlCarousel2/OwlCarousel2

Скачать версию 2.3.4

Скачать версию GitHub от 29.08.2021

Для работы данной библиотеки, необходима библиотека jQuery

CSS:

<link rel="stylesheet" href="Путь-до-папки-со-стилями/owl.carousel.min.css" />

JS после подключения библиотеки jQuery:

<script src="Путь-до-папки-с-js/owl.carousel.min.js"></script>

Пример использования:

<div class="owl-carousel owl-theme">
	<div> Контент </div>
	<div> Контент </div>
	<div> Контент </div>
	<div> Контент </div>
	<div> Контент </div>
	<div> Контент </div>
	<div> Контент </div>
</div>
<script>
$(document).ready(function(){
	$('.owl-carousel').owlCarousel();
});
</script>

Документация по API Owl Carousel 2

Параметр Тип Стандартное значение Описание
items Number 3 Кол-во отображаемых элементов в слайдере
margin Number 0 Отступ справа у элементов внутри слайдера (значение в px)
loop Boolean false Бесконечное зацикливание слайдера (для лучшего эффекта продублируйте первый и последний элемент)
center Boolean false Позиционирование элементов по центру (лучше работает при нечетном кол-ве элементов)
mouseDrag Boolean true Перелистывание элементов зажатой мышкой
touchDrag Boolean true Перелистывание касанием (смартфоны\планшеты)
pullDrag Boolean true Stage pull to edge.
freeDrag Boolean false Item pull to edge.
stagePadding Number 0 Padding left and right on stage (can see neighbours).
merge Boolean false Merge items. Looking for data-merge='{number}’ inside item..
mergeFit Boolean true Fit merged items if screen is smaller than items value.
autoWidth Boolean false Размещение элементов не сеткой (Задайте высоту каждому диву)
startPosition Number/String 0 Стартовая позиция (?) или URL хэш (Например «#id»)
URLhashListener Boolean false Отслеживание изменений URL хэша (Хэш должен присутствовать на каждом элементе)
nav Boolean false Отображение кнопок вперед\назад
navText Array Текст на кнопках навигации. HTML разрешен.
navElement String div Тип DOM элемента для навигационной ссылки в одну сторону.
slideBy Number/String 1 Пролистывание слайдера по оси X. Значение ‘page’ позволяет сделать навигацию по странице.
dots Boolean true Отображение навигационных «точек»
dotsEach Number/Boolean false Отображение навигационных «точек» ‘x’ кол-во элементов
dotData Boolean false Используется data-dot контентом
lazyLoad Boolean false Lazy-Load картинок. data-src и data-src-retina указываются для высоких разрешений. Так же загружает изображение инлайново в свойство background если элемент не является <img>
lazyContent  Вырезано из финальной версии, но разработка все еще ведется.
autoplay Boolean false Автоматическое пролистывание
autoplayTimeout Number 5000 Интервалы между пролистыванием элементов
autoplayHoverPause Boolean false Останавливает автопроигрывание если навести мышкой (hover) на элемент
smartSpeed Number 250 Просчитывание скорости (В оф. документации больше информации нет)
fluidSpeed Number
autoplaySpeed Number/Boolean false Скорость автоматического пролистывания
navSpeed Number/Boolean false Скорость навигации
dotsSpeed Number/Boolean Скорость навигации «точками»
dragEndSpeed Number/Boolean false Drag end speed.
callbacks Boolean true Включение\отключение колбэк ивентов.
responsive Object empty object Объект содержит в себе настройки для адаптивности. Если установить значение в false — поддержка адаптивности отключается.
responsiveRefreshRate Number 200 Responsive refresh rate.
responsiveBaseElement DOM element window Вешается на любой DOM элемент. Если вы хотите поддержку старых браузеров (например ie8) вешайте его на главный оберточный элемент (wrapper). Это должно предупредить неадекватный ресайз.
video Boolean false Включение\отключение поддержки в слайдере видео (youtube\vimeo\Vzaar)
videoHeight Number/Boolean false Установка высоты видео
videoWidth Number/Boolean false Установка ширины видео
animateOut String/Boolean false CSS класс анимации «out»
animateInClass String/Boolean false CSS класс анимации «in»
fallbackEasing String swing Смягчение (?) CSS2 $.animate.
info Function false Колбэк для извлечение базовой информации (текущий элемент/страницы/ширины).
nestedItemSelector String/Class false Используйте если элемент слайдера глубоко вложен в генерируемый контент, например ‘myitem’. Не используйте точку перед названием класса.
itemElement String div Тип DOM элемента слайдера.
stageElement String div Тип DOM элемента owl-stage.
navContainer String/Class/ID/Boolean false Установка своего контейнера для навигации
dotsContainer String/Class/ID/Boolean false Установка своего контейнера для навигации по «точкам»

Пример вызова Owl Carousel 2 с комментариями:

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