JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

CSS

li.active { color:#f00; }
li { float:left; margin: 10px 5px;}
span { float:left; cursor:pointer; margin: 10px 5px; }

JavaScript

$('.prev').on('click', function() {
    var i = $(".active").index();
        i--;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});

$('.next').on('click', function() {
    var i = $(".active").index();
        i = i >= $('li').length-1 ? 0 : i+1;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});