JSFiddle - React, Tailwind, and code Playground

by arnald jhosepy

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();
    setInterval(function(){
        $ds.filter(':visible').fadeOut(function(){
            var $div = $(this).next('.article-inform');
            if ( $div.length == 0 ) {
                $ds.eq(0).fadeIn();
            } else {
                $div.fadeIn();
            }
        });
    }, 3000);
});