JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>    
    </ul>
</div>

CSS

.wrap{
    width: 500px;
    overflow: hidden;    
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;    
}

li{
    width: 500px;
    height: 300px;
    background: green;
    float: left;
    font-size: 200px;
    text-align: center;
    color: #FFFFFF;
    /*position: relative;*/
}

JavaScript

var width         = $('li').width();
var totalWidth    = $('li').length * width;
var count 	      = $('li').length;
var first         = $('li').eq(0);
var last          = $('li').eq(count-1);

$('ul').css({
    'width'     : totalWidth
});

/*
first.addClass('active');

var start = function() {			
	target = $('.active').index();       
	target === last ? target = 0 : target = target+1;
 	nextSlide(target);			
};

var nextSlide = function(target) {
    //console.log(target);
	$('.active').animate({'left':'-'+ width*target +'px'},300);
	$('li').removeClass('active').eq(target).addClass('active');
};
*/
function slide(){
    $('ul').animate({'left':$('ul').position().left - width},300);
}


setInterval(function () {
                slide();
            }, 3000)