/ Scripts & jquery / Создание карусели Owl параметрами из HTML

Создание карусели Owl параметрами из HTML

06.11.2023

66

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

Передача логических (bool) атрибутов loop, autoplay, nav и т.д., не работает если параметры будут содержаться в атрибутах вида loop=»true», а парсятся функцией .attr(«loop»). При этом корректно работает через .data.

Есть еще один вариант передачи параметров, не пробовал его.

<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;).

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

  • Похожие записи
  • Комментарии
  • Вложения
Owl Carousel

Owl Carousel

Разберем решение по созданию слайдеров и каруселей Owl Carousel 2. У данной карусели есть ряд преимуществ по сравнению с каруселью slick: Чего в нем нет, так это связки слайдера с Читать далее »

ProgressBar для Owl.Carousel v.2

ProgressBar для Owl.Carousel v.2

Добавим к плагину карусели Owl Carousel (2 версии) progressbar при автоперемотке слайдов. Я наткнулся на 2 решения: попроще и посложнее. Вариант попроще Данное решение довольно примитивное. Необходимо самостоятельно добавлять к Читать далее »

Управление Owl-каруселью внешним интерфейсом

Управление Owl-каруселью внешним интерфейсом

Подключим к управлению Owl-каруселью различные варианты внешнего интерфейса. Кастомные стрелки навигации Кастомные стрелки навигации (чтобы, например, сделать их по ширине контейнера): Стандартные стрелки скрываем стилями. Скрипт управления: Можно использовать этот Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Создание карусели Owl параметрами из HTML Создание карусели Owl параметрами из HTML
Рекомендации по созданию лэндинга
Рекомендации для васРекомендации по созданию лэндингаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.