JSFiddle - React, Tailwind, and code Playground

by thcipriani

HTML

<ul class="clientRotator">
    <li>undo</li>
    <li>dos</li>
    <li>tres</li>
    <li>quatro</li>
    <li>cinco</li>
</ul>

<div class="description" id="Floyds">Floyds</div>
<div class="description" id="WholeFoods">WF</div>
<div class="description" id="Chipotle">Chipotle</div>
<div class="description" id="Bonnaroo">Bonnaroo</div>
<div class="description" id="HLSR">HLSR</div>

CSS

._1{color:red;}
._2{color:green;}
._3{color:purple;}
._4{color:grey}
._5{color:pink}
.description{font-weight:bold;}

JavaScript

var arr = ["_1","_2","_3","_4","_5"];

var $rotator = $("ul.clientRotator > li");

$rotator.each(function(i){
    $(this).addClass(arr[i]);
});

$(".description").hide();
$(".description").eq(2).show();

$rotator.click(clicked);
    
function clicked(){
    $rotator.removeClass();
    $(".description").hide();
    $(".description").eq($rotator.index($(this))).show();
    if ($(this).prev().prev().length != 0)
    {
    var $first = $(this).prev().prev();
    } else {
        switch ($rotator.index($(this))){
            case 0:
                var $first = $rotator.eq(3)
                break;
            case 1:
                var $first = $rotator.eq(4)
                break;
        }
    }
    var i = $rotator.index($first);
    for (var c=0; c<5; c++)
    {
        if ($rotator.eq(i).next().length == 0)
        {
            $rotator.eq(i).addClass(arr[c]);
            i=0;
         } else {
            $rotator.eq(i).addClass(arr[c]);
            i++   
         }
    }
}