ProgressBar для Owl.Carousel v.2

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

Вариант попроще

Данное решение довольно примитивное. Необходимо самостоятельно добавлять к слайдеру (причем вне блока слайдера) верстку progressbar.

Верстка:

<div class="slider-container">
	<div class="slide-progress"></div>
	<div id="index-slider" class="owl-carousel owl-theme">
	 
		<div class="item"><img src="assets/fullimage1.jpg"></div>
		<div class="item"><img src="assets/fullimage2.jpg"></div>
		<div class="item"><img src="assets/fullimage3.jpg"></div>
	 
	</div>
</div>

Стили:

.slider-container {
    position: relative;
}

.slide-progress {
    width: 0;
    max-width: 100%;
    height: 5px;
    background: red;
    position: absolute;
    bottom: 0;
    z-index: 9;
}

Интервал progressbar также программируется примитивно. Параметр transition: «width 5000ms» должен составлять разницу между autoplayTimeout и smartSpeed.

jQuery(document).ready(function($) {

	$('#index-slider').owlCarousel({
		items:1,
		loop:true,
		nav:true,
		smartSpeed:1000,
		autoplayHoverPause: true,
		//animateOut:'fadeOut',
		autoplay:true,
		autoplayTimeout:6000,
		onInitialized: startProgressBar,
		onTranslate: resetProgressBar,
		onTranslated: startProgressBar	
	});

	function startProgressBar() {
		// apply keyframe animation
		$(".slide-progress").css({
			width: "100%",
			transition: "width 5000ms"
		});
	}

	function resetProgressBar() {
		$(".slide-progress").css({
			width: 0,
			transition: "width 0s"
		});
	}
	
});

При этом ProgressBar в данном решении не реагирует не на перетаскивание, ни на наведение на слайдер.

Вариант посложнее

Но при этом он дает и больше возможностей и устроен более грамотно. В верстку в данном случае ничего самостоятельно добавлять не нужно. Используя этот вариант из инициализации слайдера необходимо убрать функцию autoplay, т.к. эту функцию на себя примет ProgressBar.

jQuery(document).ready(function($) {   

	var time = 6; // time in seconds

	var $progressBar,
		$bar,
		$elem,
		isPause,
		tick,
		percentTime;

	//Init the carousel
	$('#index-slider').owlCarousel({
		items:1,
		loop:true,
		margin:0,
		nav:true,
		dots:false,
		lazyLoad:true,
		smartSpeed:1500,
		navText: ['<i class="icon-chevron-left2"></i>', '<i class="icon-chevron-right2"></i>'],
		onInitialized: progressBar,
		onTranslate: moved,
		onDrag: pauseOnDragging
	});

	//Init progressBar
	function progressBar(event) {
		$elem = event.target;
		//build progress bar elements
		buildProgressBar();
		//start counting
		start();
	}

	//create div#progressBar and div#bar
	function buildProgressBar() {
		$progressBar = $("<div>", {
			id: "progressBar"
		});
		$bar = $("<div>", {
			id: "bar"
		});
		$progressBar.append($bar).prependTo($elem);
	}

	function start() {
		//reset timer
		percentTime = 0;
		isPause = false;
		//run interval every 0.01 second
		tick = setInterval(interval, 10);
	};

	function interval() {
		if (isPause === false) {
			percentTime += 1 / time;
			$bar.css({
				width: percentTime + "%"
			});
			//if percentTime is equal or greater than 100
			if (percentTime >= 100) {
				//slide to next item 
				$($elem).trigger('next.owl.carousel')
			}
		}
	}

	//pause while dragging 
	function pauseOnDragging() {
		isPause = true;
	}

	//moved callback
	function moved() {
		//clear interval
		clearTimeout(tick);
		//start again
		start();
	}
   
	//uncomment this to make pause on mouseover 
	// var elem = '#index-slider'; // для конкретной карусели
	var elem = '.owl-carousel'; // для всех каруселей

	$(elem).on('mouseover', function () {
		isPause = true;
	})
	$(elem).on('mouseout', function () {
		isPause = false;
	})
	
});

Стили:

#bar {
	width: 0%;
	max-width: 100%;
	height: 4px;
	background: blue;
}

#progressBar {
	width: 100%;
	background: #EDEDED;
}

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