JSFiddle - React, Tailwind, and code Playground

HTML

<section id="hero-slider">
    <div id="slide-1"></div>
    <div id="slide-2"></div>
    <div id="slide-3"></div>
    <div id="slide-4"></div>
</section>
<script>
    realTimeHeight();
</script>

CSS

#hero-slider{
    width: 100%;
}
#slide-1, #slide-2, #slide-3, #slide-4{
    width: 100%;
    height: inherit;
    position: absolute;
}
#slide-1{
    background: url("http://lorempixel.com/output/abstract-q-c-640-480-2.jpg") no-repeat center;
    background-size: cover;
}
#slide-2{
    background: url("http://lorempixel.com/output/city-q-c-640-480-7.jpg") no-repeat center;
    background-size: cover;
}
#slide-3{
    background: url("http://lorempixel.com/output/people-q-c-640-480-7.jpg") no-repeat center;
    background-size: cover;
}
#slide-4{
    background: url("http://lorempixel.com/output/transport-q-c-640-480-1.jpg") no-repeat center;
    background-size: cover;
}

JavaScript

var i = 4;
$(document).ready(function(){
    $(window).resize(function(){
        realTimeHeight();
    });

            fade(i, fade);

});
var fadeIN = false;
function fade(objectID, callbackfn){
    var fadeTime = 3500;
    if(!fadeIN){
        $("#slide-"+objectID).fadeOut(fadeTime);
        i--;
        if(i === 1) {
            fadeIN = true;
        }
    }
    else{
        i++;
        $("#slide-"+objectID).fadeIn(fadeTime);
        if(i === 5){
            fadeIN = false;
        }
    }
    if(arguments[1]){
        callbackfn(i);
    }
}
function realTimeHeight(){
    var altura = $(window).height();
    $("#hero-slider").css("height",altura);
}