Разберем решение по созданию слайдеров и каруселей Owl Carousel 2.
У данной карусели есть ряд преимуществ по сравнению с каруселью slick:
- Есть возможность формировать хэш-ссылки для слайдов
- Работает более быстро и стабильно
- Отлично реализован Lazyload! Реально ускоряет как эмпирически, так и по показателям PageSpeed Insights.
- Есть функция возврата (rewind) к первому слайду при достижении последнего слайда
- «из коробки» есть функция перемотки колесом мыши.
Чего в нем нет, так это связки слайдера с миниатюрами, но реализовать это можно (об этом ниже).
Базовая верстка:
<div id="index-slider" class="owl-carousel owl-theme">
<div class="item"><img class="owl-lazy" data-src=""</div>
<div class="item"><img class="owl-lazy" data-src=""</div>
<div class="item"><img class="owl-lazy" data-src=""</div>
</div>
Скрипт запуска с параметрами:
$(document).ready(function() {
$('#index-slider').owlCarousel({
items:1,
loop:true,
margin:10,
nav:true,
dots:false,
lazyLoad:true,
smartSpeed:1000,
//animateOut:'fadeOut',
autoplay:true,
navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
})
});
Некоторые стили:
#index-slider {position: relative;}
.owl-nav {
position: absolute;
bottom: 30px;
right: 30px;
font-size: 1rem;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
margin: 0 10px;
padding: 15px !important;
background: rgba(51, 51, 51, 0.7);
color: #fff;
}
Миниатюры слайдов
«Из коробки» нет функционала формирования миниатюр с навигацией на основной слайдер, но метод описан здесь.
<div id="sync1" class="owl-carousel owl-theme">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
<div id="sync2" class="owl-carousel owl-theme">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
#sync1 .item {
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item {
background: #c9c9c9;
padding: 10px 0px;
margin: 5px;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1 {
font-size: 18px;
}
#sync2 .current .item {
background: #0c83e7;
}
.owl-theme .owl-nav {
/*default owl-theme theme reset .disabled:hover links */
}
.owl-theme .owl-nav [class*="owl-"] {
transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
background-color: #d6d6d6;
}
#sync1.owl-theme {
position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
#sync1.owl-theme .owl-prev {
left: 10px;
}
#sync1.owl-theme .owl-next {
right: 10px;
}
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
autoplay: false,
dots: true,
loop: true,
responsiveRefreshRate: 200,
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2
.on('initialized.owl.carousel', function() {
sync2.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items: slidesPerPage,
dots: true,
nav: true,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
//end block
sync2
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
Альтернативный способ добавления миниатюр
Также миниатюры (thumbnail) слайдов можно добавить с помощью скрипта Owl Carousel 2 Thumbnails plugin. В настройки слайдера добавляются новые параметры:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
thumbs: true,
thumbsPrerendered: true
});
});
Соответственно добавляем в слайдер вывод миниатюр:
<div class="owl-carousel" data-slider-id="1">
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
</div>
<div class="owl-thumbs" data-slider-id="1">
<button class="owl-thumb-item">slide 1</button>
<button class="owl-thumb-item">slide 2</button>
<button class="owl-thumb-item">slide 3</button>
<button class="owl-thumb-item">slide 4</button>
</div>
Либо можно указать миниатюры таким образом:
<div class="owl-carousel">
<div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
<div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
<div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
<div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
</div>
Дополнительные настройки
thumbImage: false, // При использовании на слайде только изображений (например, в демонстрации) используйте этот параметр для динамического создания миниатюр без использования атрибута data-thumb.
thumbsPrerendered: true, // Включите это, если у вас есть предварительно обработанные миниатюры в вашем html, вместо того, чтобы позволить этому плагину создавать их. Это рекомендуется, так как это предотвратит FOUC
thumbContainerClass: 'owl-thumbs', // Класс контейнера миниатюр
thumbItemClass: 'owl-thumb-item' // Класс миниатюры
Отключить автопрокрутку
Параметр автопрокрутки при наведении: autoplayHoverPause:true
Чтобы автопрокрутка отключалась при нажатии стрелок, при этом включалась у остальных ранее отключенных:
$('.owl-prev, .owl-next').click(function(){
$('.owl-carousel').trigger('play.owl.autoplay');
$(this).parents('.owl-carousel').trigger('stop.owl.autoplay');
});
Чтобы автопрокрутка отключалась при перетаскивании (свайпе) нужно прописать в параметры слайдера функцию onDragged: stopautoplay:
jQuery('.service-slider').owlCarousel({
items:1,
loop:true,
margin:0,
nav:true,
dots:false,
lazyLoad:true,
smartSpeed:1000,
autoplay:true,
autoplayHoverPause:true,
onDragged: stopautoplay,
navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
});
И прописать функцию:
function stopautoplay(event) {
$('.owl-carousel').trigger('stop.owl.autoplay');
}
Минусом данного метода является то что в отличие от предыдущего этот отключает автопрокрутку у всех слайдеров.
Автоматический запуск видео в слайдах
Прописываем параметр с привязкой функции — onTranslated: videoautoplay. Сама функция автоматического запуска видео:
function videoautoplay(event) {
$('video').trigger('play');
}
Попадалось решение в виде такого параметра, но оно у меня не сработало:
afterAction: function(current) {
current.find('video').get(0).play();
}
Адаптивность
responsive : {
// ширина больше 0
0 : {
margin:10,
},
// ширина больше 480
481 : {
margin:15,
},
// ширина больше 1024
1025 : {
margin:30,
}
}
Равная высота блоков
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item {
display: flex;
flex: 1 0 auto;
}
Хэш ссылки и dots с содержимым
jQuery('#guestbook').owlCarousel({
items:1,
loop:false,
margin:100,
nav:false,
dots:true,
dotsData:true,
lazyLoad:false,
smartSpeed:500,
autoHeight:true,
autoplay:false,
URLhashListener:true,
startPosition: 'URLHash',
});
<?php $page_children = new WP_Query(array(
'post_type' => 'page',
'post_parent' => get_the_ID(),
'orderby' => 'menu_order',
'order' => 'ASC'
) ); ?>
<?php if($page_children->have_posts()) : ?>
<?php $i = 1; ?>
<div id="guestbook" class="owl-carousel owl-theme">
<?php while($page_children->have_posts()): $page_children->the_post();
echo '<div class="item" data-dot="<button><span>стр. </span>'.$i.'</button>" data-hash="'.$i.'"><h1>'.get_the_title().'</h1>'.get_the_content().'</div>
';
$i++;
endwhile; ?>
</div>
<?php endif; wp_reset_query(); ?>
Получится примерно следующее
Размер слайдов по горизонтали
Слайды можно кратно увеличивать по ширине. Для этого нужно добавить элементам .item атрибут data-merge
<div class="owl-carousel owl-theme">
<div class="item" data-merge="1"><h2>1</h2></div>
<div class="item" data-merge="2"><h2>2</h2></div>
<div class="item" data-merge="1"><h2>3</h2></div>
<div class="item" data-merge="3"><h2>4</h2></div>
<div class="item" data-merge="6"><h2>6</h2></div>
</div>
И они в зависимости от индекса будут занимать столько же «блоков». В скрипте карусели должен быть включен атрибут mergeFit: true
Сброс таймера autoplay
Общий скрипт для всех слайдеров Owl Corousel. Только для отслеживания события свайпа нужно привязать к инициализации слайдера функцию onDragged: resetTimeOut.
function resetTimeOut(event) {
jQuery(event.target).trigger('stop.owl.autoplay');
jQuery(event.target).trigger('play.owl.autoplay');
}
jQuery('.owl-carousel').on('click', '.owl-dots, .owl-nav', function(e) {
jQuery(this).trigger('stop.owl.autoplay');
jQuery(this).trigger('play.owl.autoplay');
});
[site-socialshare]