JSFiddle - React, Tailwind, and code Playground

by Vitorino fernandes

HTML

<div id="slideit">25</div>

CSS

#slideit {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

JavaScript

var i = 0;
var images = ['http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg', 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-2.jpg', 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg)');
//Change image at regular intervals
setInterval(function () {
    image.fadeOut(1000, function () {
        image.css('background-image', 'url(' + images[i++] + ')');
        image.fadeIn(1000);
    });
    if (i == images.length) i = 0;
}, 5000);