SO - 31877572

by Arun P Johny

HTML

<div class="jCaroFade track">
    <!-- Slides -->
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
        <p class="ipsum">SLIDE ONE</p>
    </div>
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
        <p class="ipsum">SLIDE TWO</p>
    </div>
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
        <p class="ipsum">SLIDE THREE</p>
    </div>
    <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
        <p class="ipsum">SLIDE FOUR</p>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family:sans;
}
.track {
    position:relative;
    height:400px;
    width:100%;
}
.slide {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ipsum {
    display:inline-block;
    padding:10px;
    background-color:rgba(255, 255, 255, .75);
}

JavaScript

$('.jCaroFade').each(createFader);

function createFader(i, elem) {
    var track = $(elem);
    var firstSlide = track.find('.slide').eq(0);
    var loop = 0;
    
    firstSlide.nextAll().hide();
    setInterval(function () {
        loop++;
        firstSlide = firstSlide.fadeOut(500, function(){
            $(this).appendTo(track);
        })
        .next()
        .fadeIn(500);
    }, 3000);
    
}