Создадим универсальный скрипт создания Owl-карусели. Параметры для каждой отдельной карусели будут задаваться из атрибутов элемента самой карусели.
Верстка
<div class="container">
<div class="site-carousel mobile-carousel-0 row row-cols-4 image-text-vertical"
data-mobile="1400"
data-items="4"
data-margin="30"
data-loop="false"
data-autoplay="true"
data-nav="true"
data-dots="false"
data-responsive='{"0":{"items": "1"}, "576":{"items": "2"}, "1200":{"items": "3"}}'>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Атрибуты нельзя оставлять пустыми. Если тот или иной атрибут не нужен лучше его удалять, тогда будет применяться значение по умолчанию
Скрипт
jQuery(document).ready(function($) {
$('.site-carousel').each(function(){
var items = $(this).data('items');
if(items == undefined || items == '') { items = 1; } // если атрибут не назначен
var margin = $(this).data('margin');
var loop = $(this).data('loop');
var autoplay = $(this).data('autoplay');
var nav = $(this).data('nav');
var dots = $(this).data('dots');
var responsive = $(this).data('responsive');
if( !$(this).hasClass('mobile-carousel') ) {
$(this).addClass('owl-carousel owl-theme');
$(this).owlCarousel({
items: items,
margin: margin,
loop: loop,
autoplay: autoplay,
lazyLoad: true,
smartSpeed: 1000,
autoplayHoverPause: true,
//animateOut: 'fadeOut',
navText: ['<i class="icon-chevron-left2"></i>', '<i class="icon-chevron-right2"></i>'],
nav: nav,
dots: dots,
responsive: responsive
});
} else {
var width = $(window).width();
var mobile = $(this).data('mobile');
if(mobile == undefined || mobile == '') { mobile = 1024; } // если атрибут не назначен
if (width <= mobile) {
$(this).addClass('owl-carousel owl-theme');
$(this).owlCarousel({
items: items,
margin: margin,
loop: loop,
autoplay: autoplay,
lazyLoad: true,
smartSpeed: 1000,
autoplayHoverPause: true,
//animateOut: 'fadeOut',
navText: ['<i class="icon-chevron-left2"></i>', '<i class="icon-chevron-right2"></i>'],
nav: nav,
dots: dots,
responsive: responsive
});
}
}
});
});
Если присутствует класс mobile-carousel то карусель обращается к параметру data-mobile и создает карусель только при указанной ширине.
Есть еще один вариант передачи параметров, не пробовал его.
<div class="owl-carousel" data-carousel-options='{"autoplay":"true","autoplayTimeout":"6000","items":"2"}'> ... </div>
var oc = $('.owl-carousel');
var ocOptions = oc.data('carousel-options');
var defaults = {
loop: true,
nav: false,
autoplay: true,
}
oc.owlCarousel( $.extend( defaults, ocOptions) );
Стили, предназначенные для корректного отображения карусели, при том что карусель изначально не применялась:
.row.owl-theme {
margin: unset;
}
.row.owl-theme > * {
width: auto;
padding: unset;
}
.row.owl-theme .item {
width: 100%;
}
.site-carousel .owl-stage {
display: flex;
flex-wrap: wrap;
}
.site-carousel .owl-stage .owl-item {
display: flex;
flex: 1 0 auto;
}
Анонс следующего слайда
Создадим эффект следующего слайда, штатными средствами Owl Carousel.
Для разрешения с которого это необходимо прописываем в responsive
stagePadding: 30,
margin: 30
Делаем слайдер для это разрешения полностью видимым:
.owl-carousel.mobile-shift .owl-stage-outer {
overflow: visible;
}
Но контейнер в котором содержится слайдер нужно защитить от переполнения (overflow: hidden;).
[site-socialshare]