SOURCE

let $sliders = $('.slider-item');
let i = 0;

function autoPlay(){
  $('.progress').width(0);
  $sliders.eq(i).hide();
  (i == $sliders.length-1)? i=0:i++
  $sliders.eq(i).show();
  $('.progress').animate({width:'200px'},2000,autoPlay)
}

window.onload = ()=>{
  $('.progress').animate({width:'200px'},2000,autoPlay);
}

<ul class="sliders">
  <li class="slider-item show">1</li>
  <li class="slider-item">2</li>
  <li class="slider-item">3</li>
  <li class="slider-item">4</li>
</ul>

<div class="progress"></div>

.sliders {
  width:200px;
  list-style:none
}
.slider-item{
  display:none
}
.slider-item.show{
  display:block
}


.progress{
  width:0;
  height:20px;
  background:red;
}