<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide">your content</div>
    <div class="slide">your content</div>
    <div class="slide">your content</div>
  </div>
  <div class="slider-progress">
    <div class="progress"></div>
  </div>
</div>
.slider-wrapper {
  width: 600px;
}
.slider {
  width: 600px;
  height: 400px;
  border: 1px solid #000;
}

.slide {
  width: 100%;
  height: 398px;
  background: #ccc;
}
#slick-1 .slick-dots li {
  width: 40px;
  height: 5px;
  background: #ccc;
}
#slick-1 .slick-dots li button {
  width: 40px;
  height: 5px;
}
#slick-1 .slick-dots li.slick-active,
#slick-1 .slick-dots li:hover {
  background: #777;
}
#slick-1 .slick-dots li button, 
#slick-1 .slick-dots li button:before {
  color: transparent;
  opacity: 0;
}

/* progress bar */
.slider-progress {
  width: 100%;
  height: 3px;
  background: #eee;
}
.slider-progress .progress {
  width: 0%;
  height: 3px;
  background: #000;
}
$(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();
  
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js