JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<img src="http://placekitten.com/g/200/300" alt="Cat" class="img_1" />
<img src="http://placekitten.com/200/300" alt="Cat" class="img_2" />

CSS

img {
    display: none;
    position: absolute;
}

img:first-child {
    display: block;
}

JavaScript

function slider(id) {
    id = id || 0;

    var n_image = $('[class^="img_"]').length;

    if (n_image < id) id -= n_image;

    setTimeout(function () {
        $('img:not(.img_'+ id +')').fadeOut('slow');
        $('.img_' + id).fadeIn('slow', function () {
            id++;
            slider(id);
        });
    }, 1000);
}
slider(1);