JSFiddle - React, Tailwind, and code Playground

by fedekun

HTML

<div class="slideshow">
    <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci1.jpg" />
    <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci2.jpg" />
    <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci3.jpg" />
</div>

<div class="slideshow" style="margin-left: 310px;">
    <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci3.jpg" />
    <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci2.jpg" />
</div>

CSS

.slideshow {
    position: relative;
}

.slideshow img {
    position:absolute;
    top:0;
    left:0;
}

JavaScript

window.addEvent('domready', function(){
    // Configuration
    var delayTime = 5000; // Milliseconds
    
    function rotate(images, index) {
        images.each(function(image){
            if(image.get('opacity') > 0) {
                image.fade('out');
            }
        });
        images[index].fade('in');
        rotate.delay(delayTime , null, [images, (index + 1) % images.length]);
    }
    
    var slideshows = $$('.slideshow');
    slideshows.each(function(slide) {
        var images = slide.getElements('img');
        rotate(images, 0);
    });
});