JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<ul id="slide-container">
    <li style="display: none;">
        <img src="http://i.imgur.com/8qBcyzc.jpg">
    </li>
    <li style="display: none;">
        <img src="http://i.imgur.com/oxMTFTF.png">
    </li>
    <li style="display: none;">
        <img src="http://i.imgur.com/JTM6Yqg.jpg">
    </li>
</ul>

JavaScript

var magic = window.setInterval(function () {
    if (document.readyState === "complete") {
        var children = document.getElementById('slide-container').children;
        for (var i = 0; children.length > i; i++) {
            (function (index) {
                setTimeout(function () {
                    children[index].style.display = "block";
                    console.log(i);
                }, 2000);
            })(i);
        }
        magic = window.clearInterval(magic);
    } else {
        console.log("...");
    }
}, 1000);