JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
                <div id="contenidoSlider" class="contenidoSlider">
                    <img src="img/1.jpg" alt="" width="850px" height="200px">
                    <img src="img/2.jpg" alt="" width="850px" height="200px">
                    <img src="img/3.jpg" alt="" width="850px" height="200px">
                </div><!--Aca termina el slider-->
            </div>

CSS

#contenidoSlider{
    height:200px;
    width:2550px;
}
 
#contenidoSlider img{
    float:left;
}
#slider{
    height:200px;
    width:850px;
    margin-top:2px;
    margin-bottom:2px;
    overflow:hidden;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -o-border-radius:3px;
    -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
    -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
    position:relative;
}
#slider img:nth-child(2){
    background:#eee;
}
}

JavaScript

var primera=1;
 
$(function(){
   main(); 
});
 
function main(){
    var intervalo = setInterval(function(){comienzaSlider()}, 3000);
}
 
function comienzaSlider(){
    //alert('ejecutado')
    if(primera == $("#contenidoSlider img").length ){
        primera=0;
    }
    
    $("#contenidoSlider").animate({
    marginLeft: (-1 * primera * $("#contenidoSlider img").eq(0).width())
    },700);
    primera ++;
    }