JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="parent">
    <div class="item">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 active">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 count = $('.item').length;
var current = $('.item.active').index();
var next = $('.item.active').next().index();
var prev = $('.item.active').prev().index();

function updateCurrent(){
    var current = $('.item.active').index();
    if(current == 0){
        prev = count;
    }
    if(current = count){
        next = 0;
    }
}

updateCurrent();

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

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