JSFiddle - React, Tailwind, and code Playground

by jomikr

HTML

<div id="ticker">
    <ul class="ticker">
        <li>Boo1</li>
        <li>More boo1</li>
        <li>Even more boo</li>
    </ul>
    <a class="prev" href="#">previous</a>
    <a class="next" href="#">next</a>
</div>

JavaScript

var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();

var executed = false;

function next() {
    executed = true;
    ticker.find(':visible').fadeOut(function() {
        $(this).appendTo(ticker);
        ticker.children(':first').show();
    });
}

setInterval(function() {
    if(executed == true) {
        executed = false;
    } else {
        next();
    }
}, 2000);

$('.next').click(function() {
    next();
});