JSFiddle - React, Tailwind, and code Playground

HTML

<!-- slider -->

			<div class="slider-wrapper">
			  <div class="slider">
			    <div class="viewer">

				  <div class="prev" onclick="prevNext()"><<<<</div>

			      <ul>
			        <li style="background-color: red">slide1</li>
			        <li style="background-color: green">slide2</li>
			        <li style="background-color: blue">slide3</li>
			        <li style="background-color: orange">slide4</li>
			      </ul>

				  <div class="next" onclick="prevNext()"> >>>>></div>

			    </div>
			  </div>
			</div>

			<!-- slider end -->

CSS

.slider{
  width: 100%;
}
.viewer{
  width: 100%;
  height: 459px;
  background-color: #ccc;
  margin: auto;
  position: relative;
  overflow: hidden;
  
}
.viewer ul{
  width: calc(100%*4);
  list-style-type: none;
  margin: 0;
  padding: 0;

}
.viewer li{
  width: calc(100%/4);
  height: 459px;
  float: left;
}
.animate{
  transition-property: margin-left;
  transition-duration: 2s;
}
.viewer .prev{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background-image: url(../img/prev.jpg);
  cursor: pointer;
  width: 39px;
  height: 39px;
  margin-top: 40px;
}
.viewer .next{
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  background-image: url(../img/next.jpg);
  cursor: pointer;
  width: 39px;
  height: 39px;
  margin-top: 40px;
}

JavaScript

'use strict';

var vieverSlide = 1;
var allLi = $('.viewer li');
var biasWidth = -$('.viewer').width() * (vieverSlide);

setInterval(function(){

if(vieverSlide < allLi.length){

$('.viewer ul').css('margin-left', biasWidth*vieverSlide);
  $('.viewer ul').addClass('animate');
  vieverSlide++;
  
} else{
  
 $('.viewer ul').css('margin-left', '');
 vieverSlide = 1; 
  
}
  
  
}, 5000);





function prevNext(){
	console.log(vieverSlide);
	console.log(event.target);
	console.log($(event.target).attr('class'));

	var a = $(event.target).attr('class');

	if(a == 'prev' && vieverSlide != 1){ // показываем предидущий

		console.log(vieverSlide);
		console.log(biasWidth);
		console.log(parseInt($('.viewer ul').css('margin-left').slice(0)));

		var test = parseInt($('.viewer ul').css('margin-left').slice(0)) - biasWidth;
		$('.viewer ul').css('margin-left', test);
		console.log(test);
		vieverSlide--;


	} else if (a == 'prev' && vieverSlide == 1){ // показываем последний


	} else if(a == 'next' && vieverSlide != allLi.length){ // показываем следующий

		console.log(vieverSlide);
		$('.viewer ul').css('margin-left', biasWidth*vieverSlide);
  		$('.viewer ul').addClass('animate');
  		vieverSlide++;

	} else { // показываем первый

		$('.viewer ul').css('margin-left', '');
 		vieverSlide = 1; 
	}





}