JSFiddle - React, Tailwind, and code Playground

by AntĂłnio Almeida

HTML

<div class="slideshow">
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+01" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+02" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+03" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+04" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+05" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+06" />
</div>

CSS

.slideshow {
    overflow: hidden;
    width: 400px;
    height: 260px;
    background-color: #000;
    margin: 10px;
}
.slideshow img {
    width: 600;
    height: 400;
}

JavaScript

var count = 1;
setInterval(function() {
    count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    $(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);