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:0%;
  height:10px;
  left: 0;
  margin-left: 0;
  padding: 0;
  
}

JavaScript

//--------------------------global variables----------------
var isfirst= true;
var cycle_remaining = null;
var anim_time = 5000;//in mil sec
var downtime = null;
var myTimer = null;
var is_down = false;//is down event
var is_SpeedClick_getnext = false;//set to true you want to set click to get next image
//---------------------------timer-------------------------
function Timer(callback, delay) {
    var timerId, start, remaining = delay;
	cycle_remaining = remaining;
    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
        cycle_remaining = remaining;
    };

    this.resume = function() {
        start = new Date();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
        cycle_remaining = remaining;
    };

    this.resume();
}


function slideSwitch() {
  var current = $('#slideshow .active');
  if (current.next().length) {
  	  current.removeClass('active');
	  current.next().addClass('active');
    myTimer = new Timer(slideSwitch, 5000);
	resetanim();
    startanim();
  }
  
}


//--------------------- mouse control functions----------------------
$(document).on( "click", ".holder", function() {
	if(isfirst){
  	isfirst = false;
  	slideSwitch();
  }	
});
$('.holder').on('mouseout mouseup', function(e) {
    if(is_down && !isfirst){
    	is_down = false;
    	//set this if if you want to set click to get next image
    	if(downtime > new Date() - 100 && is_SpeedClick_getnext){
			slideSwitch();
		}else{
			myTimer.resume();
      		startanim();
		}
    }
});
$(".holder").mousedown(function() {
	if(!isfirst){
		downtime = new Date();
  	 	is_down = true;
    	myTimer.pause();
    	puseanim();
  	}

});
     
//--------------------- animation control functions----------------------
//start or resume animation
function startanim() {
  var myDiv = $( ".bottom_status" );
  myDiv.show( "slow" );
  myDiv.animate({
    width:"100%"
  },cycle_remaining );
  
 ...