JSFiddle - React, Tailwind, and code Playground

HTML

<div id="display">
</div>
<input type="button" id="startBtn" value="Start"></input>
<input type="button" id="stopBtn" value="Stop"></input>

JavaScript

var slides = [
    {slide: "slide1222", duration: 5000},
    {slide: "slide2", duration: 2000},
    {slide: "slide3", duration: 10000}
];

var killSwitch;
var fnShow = function(currIndex) {
    console.log("currIndex: ",currIndex);
    $("#display").text("Showing "+ slides[currIndex].slide + " for " + slides[currIndex].duration + " seconds.");
    var nxtIndex = (currIndex < slides.length-1)? currIndex+1 : 0;
    var currDuration = slides[currIndex].duration;
    console.log("...currDuration: ", currDuration);
    killSwitch = setTimeout(function(){fnShow(nxtIndex);}, currDuration);
};

var fnStop = function() {
    clearTimeout(killSwitch);
    console.log("stopped");
};
var fnStart = function() {
    setTimeout(fnShow(0), 5000);
};
$(document).ready(function () {
    fnStart();
});
$("#startBtn").click(fnStart);
$("#stopBtn").click(fnStop);