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

232

16 января 2019, 22:50

Пытаюсь реализовать таймер в виде окружности с бордером до следующего слайда. Вроде бы продумал как это выстроить логически: сделать 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

Answer 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; 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" /> 
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
<div class="slider-wrapper" id="slick-1"> 
  <div class="slider"> 
    <div class="slide"><img src="//lorempixel.com/250/200" /></div> 
    <div class="slide"><img src="//lorempixel.com/250/201" /></div> 
    <div class="slide"><img src="//lorempixel.com/250/202" /></div> 
    <div class="slide"><img src="//lorempixel.com/250/203" /></div> 
  </div> 
  <div class="progress-round__wrap"> 
    <svg class="progress" viewBox="0 0 110 110"> 
      <circle class="circle-bg" r="50" cx="55" cy="55"/> 
      <circle class="circle-go" r="50" cx="55" cy="55"/> 
      <text class="circle-tx" x="50%" y="70"> </text> 
    </svg> 
  </div> 
</div>