*{
  margin:0;
  padding: 0;
  list-style: none;
  vertical-align: bottom;
}
/* ↑ この記述はリセット */
.wrap_slider{
  width:300px;
}
.slider li img{
  width:100%;
  height:auto;
}
.slider .slick-dots{
    bottom: 0;
    display: flex;
    justify-content: space-between;
}
.slider .slick-dots li{
  width: calc(100% / 5 - 5px);
    height: 5px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #ccc;
    overflow: hidden;
}
.slider .slick-dots li:not(:last-child){
  margin-right:10px;
}
.slider .slick-dots li.slick-active button::after{
  content: "";
  position:absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #080ae4;
  animation: progress 6.8s linear 0s forwards; /* ここでアニメーションのスピードをスライドの秒数に合わせて調整をする */
  z-index:1;
}
@keyframes progress {
  0%{
    width:0;
  }
  100% {
    width:100%;
  }
}

$(function() {
  $('.slider').slick({
      infinite: true,
      autoplay: true,
      dots: true,
      arrows: false, 
      fade: true, 
      autoplaySpeed:7000,
      speed:1000,
  })
  // 最初の1枚目だけ切り替わりが早いのを調整
  $('.slider').on('beforeChange',function(event, slick, currentSlide, nextSlide){
    if(nextSlide > 0 ) {
    $('.slider').slick('slickSetOption', 'autoplaySpeed', 6000, true)
    }
  })
});