JSFiddle - React, Tailwind, and code Playground

by Brett Gaynor

HTML

<section class="steps">class name of this section changes (see inspector)</section>
<div id="div1"></div> <!-- this could be removed -->
<button>Stop it Now.</button>

CSS

body{text-align:center;}
#div1{padding:20px;margin-top:0; text-align:center;}

JavaScript

$(document).ready(function() {

    var items = ["one", "two", "three"],
        $text = $( '#div1' ),
        $step = $( 'section.steps' ),
        delay = 2; //seconds
    
    function loop ( delay ) {
        $.each( items, function ( i, elm ){
            $step.delay( delay*1E3);
            $step.queue(function(){
                //$text.html( items[i] );
                //$step.dequeue(); // e.g. this is not needed
                $step.addClass( items[i] ).delay(2000).queue(function(){
                  $(this).removeClass( items[i - 1] ).dequeue();
                });
            });
            $text.show();
            $step.queue(function(){
                if ( i == items.length -1 ) {
                    loop(delay);   
                }
                $step.dequeue();
            });
        });
    }

    loop( delay );
		
    $("button").on("click", function() {
    	$text.stop(true, false);
    })
});