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
                    }
                }
            });
        });