JSFiddle - React, Tailwind, and code Playground

by Lorena Brito

HTML

<div id="slideshow">
</div>

JavaScript

var count = 0,
    images = [
        "http://res.cloudinary.com/insteo/image/upload/a_exif/v1432232842/02-o_19Kp3b.jpg",
        "http://res.cloudinary.com/insteo/image/upload/a_exif/v1432242332/placeholder-logo-o_ZvNUdO.jpg"
    ]

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count + 1;
    count++;
    if(count >= images.length)
        count = 0;
    currentSlideNum = count + 1;

    //This next part never gets called  because it can't access the dynamically created img
    console.log(lastSlideNum + "?" + $("#slide" + lastSlideNum).length);
    $("#slideshow img:nth-child(" + lastSlideNum + ")").fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slideshow img:nth-child(" + currentSlideNum + ")").fadeIn('slow');
    });
}

$(document).ready(function(){
    for(var i = 0; i < images.length; i++) {
        $('#slideshow').append('<img id="\"slide' + i + '\"" src="' + images[i] + '" style=\"display: none; width: 100px; height: 100px;\"/>');
    }    
    
    countDown();
});