*{
  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)
	  }
	})
});