JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    <body>
        <p id="arrow">Arrow</p>
        <ul id="news">
            <li class="showHeadline">one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </body>
</html>

CSS

ul#news li { display:hidden }
ul#news li.showHeadline { display: list-item }

JavaScript

(function() {
    var ticksInQueue = 0,
        timerId = setInterval(tickForward, 5000),
        isPaused = false;
    
    function tickForward() {
        var $active = $('#news li.showHeadline');
        var $next = $active.next();
        if($next.length==0) $next = $('#news li:first');
        $active.stop(true, true);

        $active.fadeOut('slow', function() {
            $active.removeClass('showHeadline');
        });
        
        setTimeout(function(){
                $next.fadeIn('slow', function(){
                    $next.addClass('showHeadline');
                    if(ticksInQueue) ticksInQueue--;
                })}, 1000);
            
        if(isPaused == true){
        } else {
            startScroll()
        }
   }
    
    $('#arrow').click(function () {
        if(ticksInQueue) return;
        ticksInQueue++;
        clearInterval(timerId);
        timerId = setInterval(tickForward, 5000);
        tickForward();
    });

})()