JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="parent">
    <div class="item active">DIV 1</div>
    <div class="item">DIV 2</div>
    <div class="item">DIV 3</div>
    <div class="item">DIV 4</div>
    <div class="item">DIV 5</div>
    <div class="item">DIV 6</div>
</div>
<br />
<div class="prev dir">PREV</div> - <div class="next dir">NEXT</div>

CSS

.active{
    color:red;
    background-color:yellow;
}
.item:not(.active){
    opacity:0.5;
    cursor:pointer;
}
.dir{
    display:inline-block;
    cursor:pointer;
}

JavaScript

'use strict'
$(document).ready(function () {
    $('.next').on('click', getNext);
    $('.prev').on('click', getPrev);
    $('.item').on('click', addActive);
});

function getNext() {
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.next().length) ? $curr.next().addClass('active') : $('.item').first().addClass('active');
}

function getPrev() {
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.prev().length) ? $curr.prev().addClass('active') : $('.item').last().addClass('active');
}
    
function addActive(){
    $('.item.active').removeClass('active');
    $(this).addClass('active');
}