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

$(".next").click(function(){
    if($("li.active").next().length > 0){
        $("li.active").removeClass("active").next("li").addClass("active");
    }
});
$(".prev").click(function(){
    if($("li.active").prev().length > 0){
        $("li.active").removeClass("active").prev("li").addClass("active");
    }
});