JSFiddle - React, Tailwind, and code Playground

HTML

<div class="advantages-slider">
    <ul class="advantages-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
   <a href="" class="prev-button-1">Prev</a>
   <a href="" class="next-button-1">Next</a>

CSS

.advantages-slider {
    padding-top: 50px;
    width: 900px;
    height: 370px;
    margin: 0 auto 35px auto;
    overflow-x:hidden;
}

.advantages-list {
    width: 1500px;
    height: 300px;
    overflow-x:hidden;
    position:relative;
	margin-left:-334px;
}

li {
    padding-bottom: 10px;
    width: 274px;
    height: 250px;
    position: relative;
    left: 0%;
    top: 0%;
    text-align: center;
    margin-left: 20px;
    display: block;
	margin-right:0px;
    background: red;
    float: left;
}

li.main-item {
    background: blue;
}

JavaScript

$.fn.carousel = function () {
	
	var giranews = setInterval(function(){move()},5000);
		
	var width = $(this).find('li').outerWidth(true); 
	$(this).find('li:nth-child(3)').addClass('main-item');
    var that=$(this)
	
	function move(){
		var first = that.find('li:first-child');
		first.animate({'margin-left': '-='+width},1000,function(){
			that.append(first)
			that.find('li').removeAttr('style')
			that.find('li:nth-child(3)').addClass('main-item');
			that.find('li:nth-child(2)').removeClass('main-item');
		})
	}
		
	function stopx(){
		   clearInterval(giranews);
	}
	
		
	function countdown(a) {
		var count = a;
		 timerId = setInterval(function() {
			count--;
			console.log(count);
			if(count == 0) {
				clearInterval(timerId);
				giranews = setInterval(function(){move()},5000);
			}
		}, 1000);
	}
				  
	$('.next-button-1').click(function(e){
	    e.preventDefault()
		stopx()
		if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
		var first = that.find('li:first-child');
		first.stop().animate({'margin-left': '-='+width},2000,function(){
		that.append(first)
		that.find('li').removeAttr('style')
		that.find('li:nth-child(3)').addClass('main-item');
		that.find('li:nth-child(2)').removeClass('main-item');
	   })
	})
	
	$('.prev-button-1').click(function(e){
		e.preventDefault()
		stopx()
		if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
		var first = that.find('li:first-child');
		var last = that.find('li:last-child');
		first.stop().animate({'margin-left': '+='+width},2000,function(){
		that.prepend(last)
		that.find('li').removeAttr('style')
		that.find('li:nth-child(3)').addClass('main-item');
		that.find('li:nth-child(4)').removeClass('main-item');
		})
	})	
		  
		
	
};


$('.advantages-list').carousel();