JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-slider">
    <div id="header-slider2"></div>
</div>

CSS

#header-slider {
    position: relative;
    width: 300px;
    height: 250px;
}
#header-slider2 {
    position: absolute;
    top: 0px; left: 0px;
    width: 300px;
    height: 250px;
}

JavaScript

var imagens = 
[
    'url("http://i.imgur.com/6aPfpt2.png")',
    'url("http://i.imgur.com/ehWdspA.png")'
],imgindex = 0, div1 = $('#header-slider'), div2 = $('#header-slider2');
div2.css('background-image', imagens[0]);
setInterval(function() {
    div1.css('background-image', div2.css('background-image'));
    div2.hide().css('background-image', imagens[imgindex++ % imagens.length]).fadeIn(1000);
}, 3000);