JSFiddle - React, Tailwind, and code Playground

by Ajsa Ferguson

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>

CSS

#hero-slider{
    width: 100%;
}
#slide-1, #slide-2, #slide-3, #slide-4{
    width: 100%;
    height: inherit;
    position: absolute;
}
#slide-1{
    background: url("//lorempixel.com/400/400/cats") no-repeat center;
    background-size: cover;
}
#slide-2{
    background: url("//lorempixel.com/400/400/business") no-repeat center;
    background-size: cover;
}
#slide-3{
    background: url("//lorempixel.com/400/400/cats") no-repeat center;
    background-size: cover;
}
#slide-4{
    background: url("//lorempixel.com/400/400/business") no-repeat center;
    background-size: cover;
}

JavaScript

var i = 4;
$(document).ready(function(){
    $(window).resize(function(){
        realTimeHeight();
    });
    setTimeout(function(){
        fadeItOut("#slide-"+i);
    }, 2500);
});
function fadeItOut(objectID){
    var fadeTime = 2500; /*time to fade out*/
    $(objectID).fadeOut(fadeTime);
    if(i == 1){
        i = 5;
    }
    i--;
}
function realTimeHeight(){
    var altura = $(window).height();
    $("#hero-slider").css("height",altura);
}
    realTimeHeight();