JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<ul class="slideshow">
    <li class="one active"></li>
    <li class="two"></li>
    <li class="three"></li>
</ul>

CSS

ul,
ul li {
 margin: 0;
 padding: 0;
 list-style: none;    
}

li {
 width: 100px;
 height: 100px;
 display: none;
}
.one {
 background: red;   
}
.two {
 background: green;   
}
.three {
 background: blue;   
}
.active {
 display: block;   
}

JavaScript

(function(window){
    var slideshow = function(ctx){
        var search = function(els, test){
                var arr = [];
                for(var i=0;i<els.length;i++){
                    var el = els[i];
                    if(test(el))
                        arr.push(el);
                }
                return arr;            
            },
            slides = search(ctx.childNodes, function(el){
                return (el.nodeName == "LI");
            }),
            run = function(i){
                var active = search(slides, function(el){
                    return (el.className.indexOf('active') > 0);             
                });
                active[0].className = active[0].className.replace('active','');
                slides[i].className += ' active';
                i = ((i+1) >= slides.length) ? 0 : i + 1;
                setTimeout(function(){ run(i); }, 500);
            };
        run(0);
    };
    
    slideshow(document.querySelectorAll('.slideshow')[0]);
   
})(window);