JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
    <div id="pic1">Image 1</div>
    <div id="pic2">Image 2</div>
    <div id="pic3">Image 3</div>
</div>

CSS

div#slideshow {
    position: relative;
}
div#slideshow div {
    width: 400px; height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
#pic1 { background: orange; }
#pic2 { background: lightgreen; }
#pic3 { background: lightblue; }

JavaScript

window.addEvent("load", function() {

    var duration = 3000,
        container = $("slideshow"),
        images = container.getElements("div"),
        currentIndex = 0,
        interval;

    images.each(function(img, i) {
        if (i > 0) {
            img.set("opacity", 0);
        }
    });
    
    var show = function() {
        // images[currentIndex++].fade("out");
        // images[currentIndex %= images.length].fade("in");
        images[currentIndex++].set("tween", {
            duration: 2000
        }).tween("opacity", 0);
        images[currentIndex %= images.length].set("tween", {
            duration: 2000
        }).tween("opacity", 1);
    }
        
    show.periodical(duration);

});