JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<div id="slideshow">
    <img src="https://ajaxslideshow.com/data/images/1.jpg"
    alt="1" title="1" border="0">
    <img src="https://ajaxslideshow.com/data/images/2.jpg"
    alt="2" title="2" border="0">
    <img src="https://ajaxslideshow.com/data/images/3.jpg"
    alt="3" title="3" border="0">
</div>

CSS

#slideshow {
    position:relative;
    margin:0 auto;
}
#slideshow img {
    position:absolute;
    display:none
}
#slideshow img.active {
    display:block
}

JavaScript

$("#slideshow img:first").addClass("active");



function slideshow() {
    var $active = $("#slideshow .active");

    var $next = ($("#slideshow .active").next().length > 0) ? $("#slideshow .active").next() : $("#slideshow img:first");

    // 1500 is the fade in and out speed in mili-secs - change this to speed up or slow down
    $next.fadeIn(1500, function () {
        $next.addClass("active");
        $active.fadeOut(1500).removeClass("active");
    });
}
setInterval(slideshow, 3000);