время изменения слайдера в owl carousel

Написал скрипт, но он работает криво. Когда слайды автоматически меняются(каждые 6 сек), то все работает отлично, то есть у нас заполняется загрузка от 0% - 100%, но когда мы нажмем на prev или next кнопку, то полоса загрузки не обнуляет предыдущее время, но и одновременно начинает считать с 0%, то есть у нас получается несколько полос в одной, как это можно исправить? js:

 var owl = $('#sliderTop');
function timeCounter() {
        var numSec = 0,
            totalTime = 0,
            loader = 0;
        setInterval(counter, 60);
        function counter() {
            if (numSec > 99) {
                return false;
            } else {
                totalTime += 1;
                numSec = parseInt(totalTime);
                loader = numSec + "%";
            }
            $(".load").css("width", loader);
        };
    }
        owl.on('initialized.owl.carousel', function(event) {
            timeCounter();
        });
        owl.owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 6000,
            mouseDrag: false,
            loop: true,
            nav: true,
            navText : ["<i class='fa fa-angle-up'></i>","<i class='fa fa-angle-down'></i>"],
            animateOut: 'fadeOut',
            dots: true,
            responsive : {
                768 : {
                    dots: false
                }
            }
        });
    $("#sliderTop .owl-prev").after("<div class='load-time'><div class='load'></div></div>");
    owl.on('changed.owl.carousel', function(property) {
            timeCounter();
        });