title: slick slider circle progress bar for arrow
body: <p>I have a <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick slider</a> (or more sliders) on page.</p>
  
  <p>I add arrows for slider. </p>
  
  <p>And I want the arrows to show the progress bar of the slide.
  But only in the appropriate direction.</p>
  
  <p>If the slider moves to the right, then the animation is the next arrow button. The prev arrow button should remain locked (<code>slick-disabled</code>).</p>
  
  <p>If the slider has reached the end, then the prev button is activated, and the next button one becomes inaccessible (<code>slick-disabled</code>) and the slider scrolls in the opposite direction to the first.</p>
  
  <p>At the same time, click-through slide switching should also work.</p>
  
  <p>Or next button always active and with progress. 
  And the movement occurs only to the right. 
  When we reach the last slide, the next again the first and again the movement to the right.</p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var time = 2;
  var $slick, isPause, tick, percentTime = 0;
  
  if ($('.slider').length) {
    $('.slider').each(function() {
      var time = 2;
      var isPause, tick, percentTime = 0;
  
      $slick = $(this);
      var $status = $(this).closest('.section').find('.slider-num'),
        $current = $status.find('strong'),
        $length = $status.find('i');
  
      $slick.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
  
        var i = (currentSlide ? currentSlide : 0) + 1;
        $current.html((((i) &lt; 10) ? "0" + (i) : i));
        $length.html('/' + (((slick.slideCount) &lt; 10) ? "0" + (slick.slideCount) : slick.slideCount));
        //$status.html( '&lt;strong&gt;' + (((i)&lt;10) ? "0"+(i) : i) +'&lt;/strong&gt;'+ '&lt;small&gt;/' + (((slick.slideCount)&lt;10) ? "0"+(slick.slideCount) : slick.slideCount)  + '&lt;/&lt;small&gt;');
      });
  
      $slick.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        infinite: false,
        touchMove: true,
        draggable: true,
        lazyLoad: 'ondemand',
        prevArrow: '&lt;button class="slick-prev slick-disabled"&gt;&lt;svg preserveAspectRatio="none" class="progress" viewBox="0 0 110 110"&gt;&lt;circle class="circle-bg" r="50" cx="55" cy="55"/&gt;&lt;circle class="circle-go" r="50" cx="55" cy="55"/&gt;&lt;/svg&gt;&lt;/button&gt;',
        nextArrow: '&lt;button class="slick-next"&gt;&lt;svg preserveAspectRatio="none" class="progress" viewBox="0 0 110 110"&gt;&lt;circle class="circle-bg" r="50" cx="55" cy="55"/&gt;&lt;circle class="circle-go" r="50" cx="55" cy="55"/&gt;&lt;/svg&gt;&lt;/button&gt;',
        autoplay: true,
        autoplaySpeed: 10000,
        // easing: 'swing',
      });
  
  
      $slick.on({
        mouseenter: function() {
          isPause = true;
        },
        mouseleave: function() {
          isPause = false;
          startProgressbar();
        },
        mousedown: function() {
          $rbar.fadeOut('slow');
          percentTime = 0;
        },
        afterChange: function(event, slick, currentSlide, nextSlide) {
          if (currentSlide === slick.slideCount - 1) {
            $slick.find('.slick-prev').removeClass('slick-disabled');
            $slick.find('.slick-next').addClass('slick-disabled');
          }
          console.log(currentSlide + '_' + slick.slideCount);
        }
      });
    });
  }
  
  
  
  
  
  function startProgressbar() {
    clearTimeout(tick);
    isPause = false;
    tick = setInterval(interval, 40);
    $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 &gt;= 100) {
        $slick.slick('slickNext');
        percentTime = 0;
        startProgressbar();
      }
  
      //console.log('S&gt;&gt;&gt;' + percentTime);
    }
  
  }
  
  startProgressbar();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle-bg {
    fill: rgba(255, 255, 255, 0.5);
    stroke: #8C8C8C;
    stroke-width: 1;
    stroke-linecap: butt;
  }
  
  .circle-go {
    fill: rgba(255, 255, 255, 0);
    stroke: red;
    stroke-width: 5;
  }
  
  .slick-arrow {
    width: 56px;
    height: 56px;
    padding: 0;
    position: absolute;
    top: 50%;
    margin-top: -28px;
    background: transparent;
    border: none;
    display: block;
    z-index: 100;
    cursor: pointer;
  }
  
  .slick-arrow.slick-disabled .circle-bg {
    fill: rgba(255, 255, 255, 0);
  }
  
  .slick-arrow.slick-disabled .circle-go {
    opacity: 0;
  }
  
  .slick-arrow svg {
    width: 100%;
    height: 100%;
  }
  
  .slick-prev {
    left: 0;
  }
  
  .slick-next {
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;div class="slider-wrapper" id="slick-1"&gt;
    &lt;div class="slider"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="https://images.unsplash.com/photo-1585071863849-9c95194bc0d8?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60" /&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="https://images.unsplash.com/photo-1585071550721-fdb362ae2b8d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60" /&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="https://images.unsplash.com/photo-1585001971706-6a237712c0a7?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60" /&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="https://images.unsplash.com/photo-1585068489440-879a7b089853?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Question:</strong> How can I add progress animation to slider control arrow buttons?</p>