JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
   <div id="slider_cont">
      <div class="slide" style="left:0px;">
          ++++++++++++++++++++++++++++------------------------
      </div><!-- .slide -->
   </div><!-- #slider_cont -->
</div><!-- #slider -->

CSS

#slider{
    position:relative; float:left; height:235px; width:400px; background-color:red;}
#slider_cont    {width:250px; height:100px; margin:0 auto; overflow:hidden; margin-top:50px;}
.slide            {width:2500px; height:100px; position:relative; float:left; left:0px;}

JavaScript

$(document).ready(function() {
    setInterval(slide, 3000);
});

function slide() {
    var mleft = parseInt($('.slide').css('left'));
    if(mleft >-500){
        $('.slide').animate({'left':mleft-250},1000);
    }else{
        $('.slide').animate({'left':'0px'},1000);
    }
}