Таймер окружность до следующего слайда slick slider

#javascript #html #jquery #css #slickjs

Пытаюсь реализовать таймер в виде окружности с бордером до следующего слайда. Вроде
бы продумал, как это выстроить логически:
сделать svg окружность и заполнять обводку, примерно по такой формуле: (длина окружности)
/ (время до следующего слайда).
Очень нужен совет, как реализовать данную задачу. А именно интересует: каким параметром
svg реализовать интервальную заливку окружности и на какое событие slick slider применить
все эти действия, наверное on afterchange?

моя попытка сделать это, пытался ориентироваться на прогресс бар в виде линии
https://codepen.io/st-iv/pen/KGKgmv?editors=1010

$(document).ready(function(){
  var time = 2;
  var $bar,
      $slick,
      isPause,
      tick,
      percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true,
  });

  $bar = $('.slider-progress .progress');

  $('.slider-wrapper').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  })

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 10);
  }

  function interval() {
    if(isPause === false) {
      percentTime += 1 / (time+0.1);
      $bar.css({
        width: percentTime+"%"
      });
      if(percentTime >= 100)
        {
          $slick.slick('slickNext');
          startProgressbar();
        }
    }
  }


  function resetProgressbar() {
    $bar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }

  startProgressbar();

});

// circle bar

 //Рассчитываем длину окружности по формуле (с=2πr)
var circleLength = $('.progress-round__wrap circle').attr('r')*Math.PI*2;
// здесь нужно будет сопоставить длину окружности со временем до перелистывания на
другой слайд
$('.progress-round__wrap circle').css('stroke-dasharray',       circleLength*part+','+circleLength);
});
$(document).ready(function(){
  var time = 2;
  var $circlebar; 
  $circlebar = $('.progress-round__wrap circle');
  function resetCirclebar() {
    $circlebar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }

})


и может быть попробовать совместить с данным решением
https://codepen.io/st-iv/pen/jeOMVm?editors=1010
    

Ответы

Ответ 1

Если нужно, чтобы окружность просто заполнялась синхронно с линией (как в первой
ссылке), то функцию interval() достаточно заменить на следующий код:


var $rbar = $('.progress circle');
var rlen = 2 * Math.PI * $rbar.attr('r');
function interval() {
  if (isPause === false) {
    percentTime += 1 / (time + 0.1);
    $bar.css({
      width: percentTime + '%'
    });
    $rbar.css({
      'stroke-dasharray': rlen,
      'stroke-dashoffset': rlen * (1 - percentTime / 100)
    });
  
    if (percentTime >= 100) {
      $slick.slick('slickNext');
      startProgressbar();
    }
  }
}
   /*... и стили немного сократить:*/
   .progress circle {
  fill: #ccc;
  stroke: #00d6d6;
  stroke-width: 10;
}




UPD

Переписал часть кода. Что-то убрал, что-то добавил. Надеюсь, что в моём дополнении
присутствует нужный функционал:



$(document).ready(function() {
  var time = 2;
  var $slick, isPause, tick, percentTime = 0;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true
  });
  $slick.on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
      startProgressbar();
    },
    mousedown: function() {
      $rbar.fadeOut('slow');
      percentTime = 0;
    },
    afterChange: function(event, slick, currentSlide, nextSlide) {
      $('.circle-tx').text(((currentSlide ? currentSlide : 0) + 1) + '/' + slick.slideCount);
    }
  });

  function startProgressbar() {
    clearTimeout(tick);
    isPause = false;
    tick = setInterval(interval, 20);
    $rbar.fadeIn('slow');
  }
  var $rbar = $('.circle-go');
  var rlen = 2 * Math.PI * $rbar.attr('r');

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time + 0.1);
      $rbar.css({
        strokeDasharray: rlen,
        strokeDashoffset: rlen * (1 - percentTime / 100)
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        percentTime = 0;
        startProgressbar();
      }
    }
  }
  startProgressbar();
});
.slider-wrapper {
  display: block;
  width: 250px;
  position: relative;
  margin: 0 auto;
}
.progress-round__wrap {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  text-align: center;
}

.circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 10;
  stroke-linecap: butt;
}
.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(90, 230, 240, 0.75);
  stroke-width: 8;
  stroke-linecap: round;
}
.circle-tx {
  fill: rgba(255, 255, 255, 0.6);
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1;
  font: bold 50px 'Arial';
  text-anchor: middle;
}