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>
<br />
<input type="text" name="test" class="test" value="" />

CSS

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

JavaScript

$('.next').on('click', getNext);
    $('.prev').on('click', getPrev);
    $('.item').on('click', addActive);
    $('.test').on('keyup', getInput);
    $('.test').val($('.item.active').index() + 1);


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

function getPrev() {
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.prev().length) ? $curr.prev().addClass('active') : $('.item').last().addClass('active');
        $('.test').val($curr.index());
}
    
function addActive(){
    $('.item.active').removeClass('active');
    $(this).addClass('active');
}
function getInput(){
   var $curr = $('.test').val() - 1;
   $('.item.active').removeClass('active');
   $('.item').eq($curr).addClass('active');
}