Проблема с RoyalSlider
 

Все привет, может кто работал с RoyalSlider http://dimsemenov.com/plugins/royal-slider/, подскажите пожалуйста решение. Задача следующая, для каждого слайда мне нужно рисовать прогрес анимации, в дефолтном состоянии все ок, но при клике на пейджер или ховер на слайдер, прогрес начинает анатомироваться в несколько раз быстрее, в чем проблема я не пойму.

Собственно сам код:

/**
     * Royal slider.
     */
    var $slider = $(".royalSlider");
    var delay   = 4000,
        old_delay = delay,
        new_delay = 5000,
        counter = 0;
        hover   = false;
    $slider.royalSlider({
      autoPlay: {
    		enabled: true,
    		pauseOnHover: true,
        stopAtAction: false,
        delay: delay
    	},
      arrowsNav: false,
      arrowsNavAutoHide: false,
      fadeinLoadedSlide: false,
      controlNavigationSpacing: 0,
      controlNavigation: 'bullets',
      imageScaleMode: 'none',
      imageAlignCenter:false,
      blockLoop: true,
      loop: true,
      loopRewind: true,
      numImagesToPreload: 5,
      keyboardNavEnabled: true,
    });
    
    var sliderData = $slider.data('royalSlider');
    if(sliderData != null){
      sliderData.slides[0].holder.on('rsAfterContentSet', function() {
        addSpinner();
        animateSliderStart();
      });
      sliderData.ev.on('rsAfterSlideChange', function() {
        delay = old_delay;
        animateSliderStart();
      });
    }    
    function addSpinner(){
    
      $slider.find('.rsBullet').append('<canvas class="nav-spinner" width="14" height="14">');
    
      $('.nav-spinner').each(function(index, element) {
        var context = element.getContext('2d');
        context.clearRect(0, 0, 14, 14);
        context.beginPath();
        context.lineWidth = 2.0;
        context.strokeStyle = 'rgba( 255, 255, 255, .17 )';
        context.arc( 7, 7, 6, 0, 2 * Math.PI, false );
        context.stroke();
      });
    }
    
    function animateSliderRange(){
      $('.nav-spinner').each(function(index, element) {
        var context = element.getContext('2d');
        context.clearRect(0, 0, 14, 14);
        context.beginPath();
        context.lineWidth = 2.0;
        context.strokeStyle = 'rgba( 255, 255, 255, .17 )';
        context.arc( 7, 7, 6, 0, 2 * Math.PI, false );
        context.stroke();
        if($(element).parent('.rsBullet').hasClass('rsNavSelected') && !(counter >= delay)) {
          console.log(counter);
          context.beginPath();
          context.lineWidth = 2.0;
          context.strokeStyle = '#FFF';
          context.arc( 7, 7, 6, - Math.PI / 2, counter / delay * 2 * Math.PI - Math.PI / 2, false );
          context.stroke();
        }
      });
    }
    
    function animateSliderStart() {
      interval = setInterval( function() {
          if(counter >= delay) {
            counter = 0;
            interval = clearInterval(interval);
          }
          else{
            if (hover == false){
              counter += 100;
              animateSliderRange();
            }
          }
        }, 100);
    }
    $('.rsDefault .rsBullet span').click(function(){
      counter = 0;
      animateSliderStart();
    });
    
    $('.royalSlider').hover(function() {
      hover = true;
      delay = new_delay;
    }, function() {
      hover = false;
    });
    
    /**
     * End Royal slider.
     */

Результат: template.magic7.itembridge.com/1/main.html