JSFiddle - React, Tailwind, and code Playground

by alpacalips

HTML

<span>slogan 1</span>
<span style="display:none">slogan 2</span>
<span style="display:none">slogan 3</span>

JavaScript

var spanCounter = 0;


setInterval(function(){
    var $span = $('span').eq(spanCounter);
    spanCounter = cycleSpan($span, spanCounter);
    spanCounter = (spanCounter >= $('span').length) ? 0 : spanCounter;
}, 3000)

function cycleSpan($span, spanCounter) {
    $span.fadeOut('slow', function(){
        if ($span.next('span').length) {
            $span.next().fadeIn('slow');
        } else {
            $span.siblings('span:first').fadeIn();
        }
    });
    return ++spanCounter;
};