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;
}
.dir{
    display:inline-block;
    cursor:pointer;
}

JavaScript

'use strict'
var current = $('.item.active').index();
var next = $('.item.active').next().index();
var prev = $('.item.active').prev().index();

function updateCurrent(){
    var current = $('.item.active');
}

$('.next').on('click',function(){
    $('.item').eq(current).removeClass('active');
    $('.item').eq(next).addClass('active');
    updateCurrent();
})
console.log(prev,current,next);