JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow" >
      <button id="slideproximo" class="slideshow-button" > próximo</button>
      <ul id="slides">
        <li class="slide">1</li>
        <li class="slide">2</li>
        <li class="slide">3</li>
        <li class="slide">4</li>
        <li class="slide">5</li>
        <li class="slide">6</li>
      </ul>
    </div>

CSS

#slides{
      list-style-type: none;
    }
    .slide{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }

JavaScript

jQuery(document).ready(function($){
  
  $slideshow = $("#slideshow");
  $slideshow.find("li.slide").hide();
  
  // encontra o primeiro slide e ativa.
  $slideativo1 = $slideshow.find("li.slide").first().addClass('slideatual').show();
  // encontra segundo slide e ativa
  $slideativo2 = $slideshow.find("li.slideatual").next()
                           .addClass('slideatualUltimo').show();

  $('#slideproximo').click(function(){
    $slideativo1.animate({
      "width": "slide", 
      "opacity": "hide",
    }, "slow",  function() {                       
      // Procura proximo
      $slideativo1 = $slideshow.find("li.slideatualUltimo").next();
      if(!$slideativo1.size()){
        $slideativo1 = $slideshow.find("li.slide").first();
        console.log('Reseto!');
      }      
      $slideshow.find("li.slideatual").removeClass("slideatual");

      $slideativo1.addClass("slideatual").animate({
        "width": "slide", 
        "opacity": "show"
      }, "slow");
    });
    
    // $slideativo2
    $slideativo2.animate({
      "width": "slide", 
      "opacity": "hide",
    }, "slow",  function() {                       
      // Procura proximo
      $slideativo1 = $slideshow.find("li.slideatualUltimo").next();
      $slideativo2 = $slideativo1.next();
      
      if(!$slideativo2.size()){
        $slideativo2 = $slideshow.find("li.slideatual").next();
        console.log('Reseto 2!');
      }
      
      $slideshow.find("li.slideatualUltimo").removeClass("slideatualUltimo");
      
      $slideativo2.addClass("slideatualUltimo").animate({
        "width": "slide", 
        "opacity": "show"
      }, "slow");

    });
  });
  
  
  
  
  
  
 
});