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

Подключим к управлению Owl-каруселью различные варианты внешнего интерфейса.

Кастомные стрелки навигации

Кастомные стрелки навигации (чтобы, например, сделать их по ширине контейнера):

<div id="index-slider" class="custom-slider">
	<?php echo do_shortcode( '[site-slider]' ); ?>
	<div class="container"><div class="custom-nav">
		<div class="custom-nav-prev"><i class="icon-arrow-left2"></i></div>
		<div class="custom-nav-next"><i class="icon-arrow-right2"></i></div>
	</div></div>
</div>

Стандартные стрелки скрываем стилями.

Скрипт управления:

$('.custom-nav-prev').on('click', function(){
	$(this).parents('.custom-slider').find('.owl-prev').click();
});	

$('.custom-nav-next').on('click', function(){
	$(this).parents('.custom-slider').find('.owl-next').click();
});

Можно использовать этот скрипт на разных слайдерах, главное чтобы все было обернуто в класс custom-slider.

Управление слайдером отдельными кнопками

Верстка кнопок:

<div class="service-items">
	<div data-hash="0">Диагностика</div>
	<div data-hash="1">Очки и линзы</div>
	<div data-hash="2">Ночные линзы</div>
	<div data-hash="3">Блефаропластика</div>
</div>

Скрипт управления:

$('.service-items > *').on('click', function(){
	var number = $(this).attr('data-hash');
	$(".service-slider").trigger("to.owl.carousel", [number, 1])
});

service-slider — класс конкретного слайда.

Универсальная система управления любой owl-каруселью

Создадим для каруселей блок дублирующий управление (nav, dots).

Верстка блока управления:

<div class="slider-nav" data-purpose="review-slider">
	<div class="prev"><img src="/wp-content/themes/undersun/images/icon-arrow-left.svg"></div>
	<div class="dots"></div>
	<div class="next"><img src="/wp-content/themes/undersun/images/icon-arrow-right.svg"></div>
</div>

Тут важным элементом является атрибут data-purpose, который указывает на ID слайдера которым нужно управлять. Соответственно у слайдера должен быть этот идентификатор.

Скрипт управления:

jQuery(document).ready(function($){
	
	$('.slider-nav').each(function(){
		var purpose = $(this).data('purpose');
		var count_dots = $('#' + purpose).find(".owl-dots > *").length;
		var i;
		for (i = 0; i < count_dots; ++i) {
			$(this).find('.dots').append('<div>');
		}

		$(this).find('.dots > *:first-child').addClass('active');

		// левая стрелка изначально неактивна
		$(this).find('.prev').addClass('disabled');
	});

	$('body').on('click', '.slider-nav .dots > *', function(){
		$(this).parent('.dots').find('*').removeClass('active');
		$(this).addClass('active');
		var index = $(this).index();
		var purpose = $(this).parents('.slider-nav').data('purpose');

		$('#' + purpose).find(".owl-dots > *").eq(index).click();
	});

	$('body').on('click', '.slider-nav .prev', function(){
		var purpose = $(this).parent('.slider-nav').data('purpose');
		// $('#' + purpose).trigger('prev.owl.carousel'); // логика перемотки слайдов по умолчанию (по 1 шт)

		// логика перемотки страниц
		var $dots = $('#' + purpose).find('.owl-dot');
		var $prev = $dots.filter('.active').prev();

		if (!$prev.length) { 
			// активировать последнюю страницу, если мы на первой
			// $prev = $dots.last();
			// $prev.trigger('click');
		} else {
			$prev.trigger('click');
		}
	});

	$('body').on('click', '.slider-nav .next', function(){
		var purpose = $(this).parent('.slider-nav').data('purpose');
		// $('#' + purpose).trigger('next.owl.carousel'); // логика перемотки слайдов по умолчанию (по 1 шт)

		// логика перемотки страниц
		var $dots = $('#' + purpose).find('.owl-dot');
		var $next = $dots.filter('.active').next();

		if (!$next.length) { 
			// активировать первую страницу, если мы на последней
			// $next = $dots.first(); 
			// $next.trigger('click');
		} else {
			$next.trigger('click');
		}
	});
	
});

По умолчанию Owl-карусль работает так: стрелки (nav) перематывают по одному элементу (слайду), а точки (dots) разбивают карусель на страницы и перематывают по ним. Поэтому в коде представлены оба варианта применения стрелок. Атрибут SlideBy меняет логику автопрокрутки и стрелок, но перемотка свайпом может быть и по одному слайду. SlideBy достаточно прописать один раз (при максимуме слайдов), ему не нужно прописывать responsive.

Также для синхронизации положения точек нужно для карусели задать параметр onChanged: track_dots и функцию отслеживания при прокрутке слайдов (свайпом, автопрокруткой и т.д.).

// Функция для синхронизации точек во внешней навигации
// при наступлении событий перемотки слайда
function track_dots(event) {
	var id = $(event.target).attr("id");
	var index = $(event.target).find(".owl-dots .active").index();
	// $('div[data-purpose="'+id+'"]').find('.dots > *').eq(index).click();

	$('div[data-purpose="'+id+'"]').find('.dots > *').removeClass('active');
	$('div[data-purpose="'+id+'"]').find('.dots > *').eq(index).addClass('active');


	// передаем состояние стрелок
	$('div[data-purpose="'+id+'"]').find('.prev').removeClass('disabled');
	$('div[data-purpose="'+id+'"]').find('.next').removeClass('disabled'); 

	var prev = $(event.target).find(".owl-prev");
	if (prev.hasClass('disabled')) { $('div[data-purpose="'+id+'"]').find('.prev').addClass('disabled'); }

	var next = $(event.target).find(".owl-next");
	if (next.hasClass('disabled')) { $('div[data-purpose="'+id+'"]').find('.next').addClass('disabled'); }

	var autoplay = $(event.target).data("autoplay");
	if (autoplay === true) {
		$(event.target).trigger('stop.owl.autoplay');
		$(event.target).trigger('play.owl.autoplay');
	}
}

И бонусом 2 последние строки — отличное решение для перезагрузки автопрокрутки, чтобы не было случаев, когда мы перематываем слайды и в этот момент срабатывает автопрокрутка. По умолчанию такие ситуации случаются. !Только в div карусели обязательно должен быть атрибут data-autoplay true либо false.

Можно добавить функцию перезагрузки точек при изменении размера окна браузера

// Функция перезагрузки точек при изменении размера экрана
function reload_dots(event) {

	// alert('onResized');

	var id = $(event.target).attr("id");

	$('div[data-purpose="'+id+'"]').find('.dots').empty();

	var count_dots = jQuery('#' + id).find(".owl-dots > *").length;
	var i;
	for (i = 0; i < count_dots; ++i) {
		$('div[data-purpose="'+id+'"]').find('.dots').append('<div>');
	}

	var index = $(event.target).find(".owl-dots .active").index();
	$('div[data-purpose="'+id+'"]').find('.dots > *').eq(index).addClass('active');
}

Добавляются эти функции в параметры карусели так:

onChanged: track_dots,
onResized: reload_dots,

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