Owl Carousel 2

Скачать плагин на официальном сайте

https://owlcarousel2.github.io/OwlCarousel2/

Для работы слайдера необходим установленный на сайт jqwery

https://jquery.com/download/

Подключение в head

<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/owl.theme.default.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

carousel.min.css - файл стилей слайдера
owl.theme.default.css - пользовательский файл стилей
owl.carousel.min.js - скрипт слайдера

html разметка

<div class="owl-carousel owl-theme">
  <div> Контент </div>
<div> Контент </div>
<div> Контент </div>
</div>
Класс owl-carousel - обвертка слайдера (основной класс)
Класс owl-theme - пользовательские настройки (не основной класс)

Управляющий скрипт

<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
</script>

Для примера. Настройки слайдера на главной странице - 1 слайд

$(document).ready(function(){
//Slider main page
$(".owl-carousel").owlCarousel({
items:1,
loop:true,
margin:0,
nav:true,
autoplay:true,
autoplayTimeout:6000,
smartSpeed:750,
autoplayHoverPause:false
});
$(".owl-prev").html("<i class='fa fa-angle-left'></i>");
$(".owl-next").html("<i class='fa fa-angle-right'></i>");
});

Для примера. Настройки карусели - 3 слайда

$(document).ready(function() {

$('.owl-carousel').owlCarousel({
loop:true, //прокручивание элементов по кругу
margin: 50, //отступы межу элементами
nav:true, //отобразить элементы управления
responsive:{
0:{
items:1
}, //при ширине окна < 992 отображать 1 элемент
992:{
items:3
} //при ширине окна > 992 отображать 3 элемент
}
});

});

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

Опция Тип данных По умолчанию Описание
items Number 3 Количество элементов, которые вы хотите увидеть на экране.
margin Number 0 Отступ в пикселях справа от слайда.
loop Boolean false Бесконечная прокрутка элементов.
nav Boolean false Выводит кнопки вперед\\назад.
autoplay Boolean false Автовоспроизведение.
autoplayTimeout Number 5000 Задержка для автовоспроизведения.
dots Boolean true Показывать точки навигации.
center Boolean false Отцентровать элемент. Хорошо работает даже с нечетным количеством элементов.
mouseDrag Boolean true Включение перетягивания слайдов мышью.
touchDrag Boolean true Включение перетягивания слайдов на тач-скрине.
pullDrag Boolean true Возможность тянуть слайды за границы.
freeDrag Boolean false Тоже, только к отдельному слайду.
stagePadding Number 0 Отступы слева и справа (чтобы видеть соседние слайды).
merge Boolean false Слияние элементов. Ищет data-merge="{number}’ внутрли элемента…
mergeFit Boolean true Выбираются объединенные элементы, если экран меньше, чем значение элемента.
autoWidth Boolean false Автоматический подбор ширины. Попробуйте использовать свойства ширины в атрибуте style.
startPosition Number/String 0 Стартовая позиция или URL хэш-строка ‘#id’.
URLhashListener Boolean false Реагировать на изменение хэша URL.
rewind Boolean true Вернуться назад, когда граница карусели достигнута.
navText Array [‘next’,’prev’] Текст для кнопок. Поддерживает HTML.
navElement String div Тип элемента DOM для одной направленной навигационной ссылки.
slideBy Number/String 1 Навигация по слайдам x.’страница’.
dotsEach Number/Boolean false Показывать точки каждого элемента X.
dotData Boolean false Использование data-dot содержимого.
lazyLoad Boolean false «Ленивая» загрузка изображений.
autoplayHoverPause Boolean false Пауза при наведении.
smartSpeed Number 250 Рассчет скорости. Бета.
fluidSpeed Boolean Number Рассчет скорости. Бета.
autoplaySpeed Number/Boolean false Скорость автовоспроизведения.
navSpeed Number/Boolean false Скорость навигации.
dotsSpeed Boolean Number/Boolean Скорость пагинации.
dragEndSpeed Number/Boolean false Скорость при «отпускании» слайда.
callbacks Boolean true Включение событий коллбеков.
responsive Object empty object Объект для опций адаптивности.
responsiveRefreshRate Number 200 Адаптивная частота обновления.
responsiveBaseElement DOM element window Указывает на любой DOM элемент.
video Boolean false Включение выборки с видео-сервисов.
videoHeight Number/Boolean false Установка высоты для видео.
videoWidth Number/Boolean false Установка ширины для видео.
animateOut String/Boolean false Класс для CSS3 анимации исчезновения.
animateIn String/Boolean false Класс для CSS3 анимации появления.
info Function false Обратный вызов для получения базовой информации (текущий элемент/страница/ширина).
nestedItemSelector String/Class false Используйте его, если элементы карусели глубоко вложены в какой-то сгенерированный контент. Не используйте точку перед именем класса.
itemElement String div Тип DOM-элемента для слайда.
stageElement String div Тип DOM-элемента для шага прокрутки.
navContainer String/Class/ID/Boolean false Устанавливает ваш собственный контейнер для навигации.
dotsContainer String/Class/ID/Boolean false Устанавливает ваш собственный контейнер для пагинации.
Менеджер
Сафронова Екатерина
Ведущий специалист
+7 000-00-88
Консультация специалиста
Наш менеджер перезвонит вам в течении 5 минут
Менеджер
Команда ГВОЗДЕВСОФТ
Оставить заявку
Менеджер
Хорошова Анастасия
Сметчик
+7 000-00-99
Заказать расчет
Бесплатный расчет сметы в течении одного дня