<div class="slider">
  <img src="https://source.unsplash.com/LEpfefQf4rU" alt="">
  <img src="https://source.unsplash.com/dQ5G0h7sLno" alt="">
  <img src="https://source.unsplash.com/uy5t-CJuIK4" alt="">
  <img src="https://source.unsplash.com/hQPoYovqWR0" alt="">
</div>

body {
  margin: 0;
  padding: 0;
}

.slider {
  width: 85%;
  margin: 0 auto;
  
  img {
    width: 100%;
    height: auto;
  }
}

.slider-dots {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  
  li {
    display: inline-block;
    width: calc(25% - 8px);
    margin: 0 2px;
  }
  
  button {
    position: relative;
    width: 100%;
    height: 4px;
    border: 0;
    background-color: #ccc;
    font-size: 0;
    
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      display: block;
      width: 0%;
      height: 100%;
    }
  }
  
  .slick-active {
    button:after {
      background-color: #000;
      animation: progress 5.5s linear forwards;
    }
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}

$('.slider').slick({
	pauseOnHover: false,
  pauseOnFocus: false,
  slidesToShow: 1,
  slidesToScroll: 1,
	autoplay: true,
	autoplaySpeed: 5000,
	dots: true,
  arrows: false,
	dotsClass: 'slider-dots',
});