Создадим универсальный скрипт создания 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;).

Поделиться в соц. сетях: