JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
  <img id="button-prev" src="http://jquerydemo.com/demo/images/left.jpg">
      
  <div class="slider-mask">
   <div id="slider-content">
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
     </div>
       
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
     </div>
       
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
     </div>
       
   </div>
  </div>
  <img id="button-next" src="http://jquerydemo.com/demo/images/right.jpg">

CSS

#slider {
    width: 600px;
    margin: 0 auto;
    position: relative;	
}

.slider-mask {
    overflow:hidden;
    position: relative;
}

.slider-img {
    margin:0; 
    float: left;
    position: relative;
}

.caption  {
    color:#DC6804; 
    padding:5px 10px 10px 10px; 
    margin:0; 
    font-family:Verdana; 
    text-transform:uppercase; 
    font-size:12px;
}  
   
#button-prev {
    position: absolute;
    top: 180px;
    cursor: pointer;
    left: -45px;
}

#button-next {
    position: absolute;
    top: 180px;
    cursor: pointer;
    right: -45px;
}

/* 
adjust #slider-content width as needed 
width = image width * image count
width = 600px * 3 = 1800px 
*/
#slider-content {
    width: 1800px;
    position: relative;
}

JavaScript

(function($) {
   var primeiraImagem = $('#slider-content .slider-img:first').index();
   var ultimaImagem   = $('#slider-content .slider-img:last').index();

   var imagemAtual    = primeiraImagem
   var proximaImagem  = primeiraImagem + 1
   var imagemAnterior = ultimaImagem

   var sliderImages = $('.slider-img');
   var sliderContent = $('#slider-content');
 
   var larguraImagem = parseFloat(sliderImages.eq(0).css('width'));
 
    setInterval(function(){
        proximaImagem = imagemAtual == ultimaImagem ? primeiraImagem : imagemAtual + 1;
        sliderContent.animate({ "left": -proximaImagem * larguraImagem });
        imagemAtual = proximaImagem;
        e.preventDefault();  
    }, 3000);
    
   $('#button-next').click(function() {
       proximaImagem = imagemAtual == ultimaImagem ? primeiraImagem : imagemAtual + 1;
       sliderContent.animate({ "left": -proximaImagem * larguraImagem });
       imagemAtual = proximaImagem;
       e.preventDefault();  
   });
   $('#button-prev').click(function() {
       imagemAnterior = imagemAtual == primeiraImagem ? ultimaImagem : imagemAtual - 1;
       sliderContent.animate({ "left": -imagemAnterior * larguraImagem });
       imagemAtual = imagemAnterior;
       e.preventDefault();  
   });
    
})(jQuery);