JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inform">
    <div class="article-inform"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
        <h1>Primeira imagem do slide</h1>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as             their default model text, and a search for 'lorem ipsum' will.
        </p>
        <button>Acessar</button>
    </div>
    <div class="article-inform"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
      <h1>Segunda imagem do slide</h1>
     <p>Many um desktop publishing packages and web page editors now use Lorem Ipsum as             their default model text, and a search for 'lorem ipsum' will.
     </p>
        <button>Acessar</button>
    </div>
        
    <div class="article-inform"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
      <h1>Terceira imagem do slide</h1>
     <p>Many dois desktop publishing packages and web page editors now use Lorem Ipsum as             their default model text, and a search for 'lorem ipsum' will.
    </p>
        <button style="float:rigth;">Acessar</button>
    </div>
</div>
<div class="preview">
    <button class="prev">Anterior</button>
    <button class="next">Proximo</button>
</div>

JavaScript

$(function(){
    $ds = $('.inform .article-inform');
    $ds.hide().eq(0).show();
    
    var interval = setInterval(function(){
        change("next");
    }, 3000);
    
    var change = function(fn) {
        $ds.filter(':visible').fadeOut(function(){
            var $div = $(this)[fn]('.article-inform');
            if ( $div.length == 0 ) {
                if (fn == "next") {
                	$ds.eq(0).fadeIn();
                }
                else {
                    $($ds[$ds.length - 1]).fadeIn();
                }
            } else {
                $div.fadeIn();
            }
        });
    };
    
    $(".preview .prev").on("click", function() {
        window.clearInterval(interval);
        change("prev");
    });
    
    $(".preview .next").on("click", function() {
        window.clearInterval(interval);
        change("next");
    });
});