Owl Carousel 2
jQuery плагин для организации карусели. Лицензия MIT – свободное распространение в любых целях.
Для начала использования плагина его нужно подключить. Подключение в разделе <head> … </head> html страницы.
Подключаются файлы стилей.
Основной файл owl.carousel.min.css
Файл owl.theme.default.min.css нужен если предполагается использовать навигацию.
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">Подключаем js. Сначала подключается jQuery и потом Owl Carousel. Если поменять порядок подключения – плагин работать не будет.
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>! Подключение к теме WordPress производится по-другому. Подробнее здесь – WORDPRESS + OWL CAROUSEL.
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
.
.
.
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>В html странице определяется контейнер для карусели.
Класс owl-carousel обязателен.
Если будет навигация, добавляется класс owl-theme.
jQuery( function($) {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});loop:true – слайдеры будут перемещаться по кругу
margin:10 – расстояние между слайдерами 10px
nav:true – включается отображение навигации (стрелки и точки)
responsive – адаптивность, количество видимых слайдеров в зависимости от ширины экрана
Еще часто используем такие параметры:
dots: false, // не показываем точки
autoWidth:true, // обрезаются левая и правая часть, полная ширина только по центру
center: true, // центральный item получит дополнительный класс center, будет class=”owl-item active center”
Параметров существенно больше. Полный перечень опций в описании плагина
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">...</div>
<div class="owl-item">...</div>
<div class="owl-item">...</div>
</div>
</div>
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>CSS классы
Классы owl-carousel и owl-theme – для общего контейнера карусели
Класс owl-nav – навигация – стрелки
Класс owl-dots – навигация – точки
Класс owl-item – отдельный слайдер
Получится как-то так
1
2
3
4
5
6
7
8
9
10
11
12
Особенности подключения и наполнения карусели в теме WordPress – WORDPRESS + OWL CAROUSEL.
Самый первый комментарий 20:22 13.02.2023