JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="slider">
	<ul>
		<li><img src="img/img1.jpg"></li>
		<li><img src="img/img2.jpg"></li>
		<li><img src="img/img3.jpg"></li>
		<li><img src="img/img4.jpg"></li>
	</ul>
	<div class="slider-nav">
		<a href="#" rel="prev">prev</a>
		<a href="#" rel="next">next</a>
	</div>

CSS

/*css*/
*{
	margin: 0;
	padding: 0;
}

.slider{
	position: relative;
	top: 20px;
	width: 600px;
	height: 400px;
	margin: 0 auto;
	overflow: hidden;
    border-radius: 10px;
    background: rgba(100, 200, 200, 0.2);
}
.slider li{
	float: left;
}
.slider ul {
	list-style: none;
	width: 100000px;
}
.slider-nav{
	display: none;
	position: absolute;
	top: 70%;
	width: 100%;
}
.slider-nav a{
	position: absolute;
	color: gray;
	width: 45px;
	height: 30px; 
	border: 5px solid rgba(0,0,0,0.5);
	padding: 10px 0 0 0; 
	border-radius: 25px;
	outline: none;
    box-shadow:inset 0 0 5px rgba(200,200,200,0.5);
	background: rgba(200, 100, 100, 0.9);
	text-align: center;
	text-decoration: none;
	color: white;
    z-index: 100;
}
	
a[rel="next"]{
	left: 89%;
	}
img {
     background: black;   
}
}

JavaScript

$( document ).ready( function() {
	slider = new Slider( '.slider', '.slider-nav', 6000 );
	slider.nav.click( function(){
		slider.setCoords( $( this ).attr('rel') );
	} );
    dat = $('.slider').append("<div id='time'></div>").find('#time').css({'position':'absolute','top':'90%'});
      setInterval( function(){
        var time='';
        time += ':' + new Date().getSeconds().toString();
        time += ':' + new Date().getMilliseconds().toString().slice(0,1);
        $('#time').text( time );
    },100)
//ready end;	
});
function Slider( slider, sliderNav, dly ) {
	this.container = $( slider ).find('ul');
	this.current = 0;
	this.nav = $( sliderNav ).css('display','block').find('a');
	this.delay = dly;
	this.imgArray = this.container.find( 'img' );
	this.imgW = this.imgArray[0].width;
	//покрутка картинки
	this.transmit = function( range ) {
			 this.container.animate({'margin-left': -(range * this.imgW) + 'px'});
             this.auto();

    }

	this.setCoords = function ( dir ){

                    clearTimeout( this.timer );
				 	var pos = this.current;
				 	pos += ( ~~( dir === 'next' ) || -1 );
				 	this.current = ( pos < 0 ) ? this.imgArray.length - 1 : pos % this.imgArray.length;				
				 	this.transmit( this.current );
 	}

    this.auto();
//end of constructor Slider 	
}
var  slider;

Slider.prototype.auto = function(){
    this.timer = setTimeout( function(){
        slider.setCoords('next');
    }, this.delay );

}
var dat = 0;