JSFiddle - React, Tailwind, and code Playground

HTML

<div id=slideshow>
<div class='holder active'>
Click here to start counting and click and hold to stop.
</div>

<div class='holder'>
text 2
</div>

<div class='holder'>
text 3
</div>

<div class='holder'>
text 4
</div>
</div>

<div class=bottom_status></div>

CSS

.holder{
  display:none;
}

.active{
  display:block;
}

.bottom_status{
  position:absolute;
  bottom:0;
  background:blue;
  width:1%;
  height:5px;
  
}

JavaScript

$(document).on( "click", ".holder", function() {
 	slideSwitch();
});

function slideSwitch() {
  var current = $('#slideshow .active');
  current.removeClass('active');
  if (current.next().length) {
	  current.next().addClass('active');
    myInterval = setTimeout(slideSwitch, 5000);
		bar();
  }
  
}
 


  var interval = null
function bar() {
  var maxtime = 5000;
  var incremental = 10;
  var actualtime = 0;
  $(".bottom_status").width('0'+"%");
  clearInterval(interval);
  $(".bottom_status").show();
  
  interval = setInterval(function() {
  	actualtime += incremental;
  	var percentage = 100 / maxtime * actualtime;
    $(".bottom_status").width(percentage+"%");
    if (actualtime == maxtime) {
    	clearInterval(interval);
		$(".bottom_status").hide();
    }
  }, incremental)
  
}