JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider_container Centered">
    <figure id="Slider">
        <img src="Images/HBC.jpg" id="1" class="effect Image"/>
        <img src="Images/Easter-Pic.jpg" id="2" class="effect Image"/>
    </figure>
 </div>

JavaScript

var Figure_Slider;
var Images;
var Image_Num;
var Current_Element;
var Previous_Element;
var advanceCallCount = 0;

function main() {
    Figure_Slider = document.getElementById("Slider");
    Images = document.getElementById("Slider").children;
    Image_Num = Images.length;

    for (var i = 1; i <= Image_Num; i++) {
        var index = i;
        Current_Element = document.getElementById(i.toString());
        if (index == 1)
        {
            Current_Element.classList.add("active");
        }
        else
        {
            Previous_Element.classList.remove("active");
            Current_Element.classList.add("active");
        }
        window.setTimeout(function(){
            advance('Called from setTimeout');
        }, 4000); //This doesn't work
        advance();
    }
    Current_Element.classList.remove("active");
}

function advance(param) {
		advanceCallCount++;
		console.log('advanceCallCount = ' + advanceCallCount+ '; advance param: ' + param);
    
    Previous_Element = Current_Element;
}

//window.onload = main;
main();