$(document).ready(function () {
// Home slider with custom dots and progress var owl = $('.home-slider'); var timer; var slideDuration = 5000;
owl.owlCarousel({ loop: true, margin: 10, nav: true, navText: [ '', '' ], dots: true, items: 1, autoplay: true, autoplayTimeout: slideDuration, autoplayHoverPause: true, responsive: { 0: { nav: false }, 575: { nav: false }, 768: { nav: false }, 1300: { nav: true } } });
function buildCustomDots() { var totalItems = owl.data('owl.carousel')._items.length; var customDotsContainer = $('.custom-owl-dots'); customDotsContainer.empty();
for (var i = 0; i < totalItems; i++) { var dotWrapper = $('
'); var progressBar = $('
'); dotWrapper.append(progressBar).attr('data-dot-index', i); customDotsContainer.append(dotWrapper); } }
function startProgressBar(index) { $('.custom-owl-dots .dot-wrapper .progress-bar').css('width', '0%').stop(true, true); $('.custom-owl-dots .dot-wrapper').removeClass('active');
var $activeProgressBar = $('.custom-owl-dots .dot-wrapper[data-dot-index="' + index + '"] .progress-bar'); var $activeDotWrapper = $('.custom-owl-dots .dot-wrapper[data-dot-index="' + index + '"]'); $activeDotWrapper.addClass('active');
$activeProgressBar.animate({ width: '100%' }, slideDuration, 'linear'); }
buildCustomDots(); startProgressBar(0);
owl.on('changed.owl.carousel', function (event) { startProgressBar(event.page.index); });
$('.custom-owl-dots').on('click', '.dot-wrapper', function () { var dotIndex = $(this).attr('data-dot-index'); owl.trigger('to.owl.carousel', [dotIndex, 300]); });
owl.on('mouseover', function () { owl.trigger('stop.owl.autoplay'); $('.custom-owl-dots .dot-wrapper.active .progress-bar').stop(true, false); });
owl.on('mouseout', function () { owl.trigger('play.owl.autoplay'); var $activeProgressBar = $('.custom-owl-dots .dot-wrapper.active .progress-bar'); var currentWidth = $activeProgressBar.width(); var totalWidth = $activeProgressBar.parent().width(); var remainingDuration = slideDuration * (1 - (currentWidth / totalWidth)); $activeProgressBar.animate({ width: '100%' }, remainingDuration, 'linear'); });
owl.on('drag.owl.carousel', function () { $('.custom-owl-dots .dot-wrapper.active .progress-bar').stop(true, false); });
});