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(){
function proximo() {
$ds.filter(':visible').fadeOut(function(){
var $div = $(this).next('.article-inform');
if ( $div.length == 0 ) {
$div = $ds.eq(0);
}
$div.fadeIn();
});
}
function anterior() {
$ds.filter(':visible').fadeOut(function(){
var $div = $(this).prev('.article-inform');
if ( $div.length == 0 ) {
$div = $ds.eq($ds.length-1);
}
$div.fadeIn();
});
}
$ds = $('.inform .article-inform');
$ds.hide().eq(0).show();
setInterval(function(){
// proximo();
}, 3000);
$('button.next').click(proximo);
$('button.prev').click(anterior);
});