JSFiddle - React, Tailwind, and code Playground

by narensrinivasans

HTML

<div class="bg">
    <nav>
        <li id="first">text1</li>
        <li id="second">text2</li>
        <li id="third">text3</li>
    </nav>
</div>

CSS

.bg {
    height: 250px;
    width: 500px;
    background: #eee;
    transition: all 0.35s;
}
.bg.one {
    background: #999;
}
.bg.two {
    background: #555;
}

JavaScript

setInterval(function () {
    change_slider();
}, 3000);

function change_slider() {   
    if($('.bg').hasClass('one'))
    {
        $('.bg').addClass('two').removeClass('one');
    }
    else if($('.bg').hasClass('two'))
    {
        $('.bg').removeClass('two');
    }
    else
    {
        $('.bg').addClass('one');
    }
}