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>
<div class="showbox"></div>
<br />
<div class="prev dir">PREV</div> - <div class="next dir">NEXT</div>
<br />
<input type="text" name="test" class="test" value="" />
AutoPlay:
<input type="checkbox" name="check" class="check" />

CSS

.active{
    color:red;
    background-color:yellow;
}
.item:not(.active){
    opacity:0.5;
    cursor:pointer;
}
.dir{
    display:inline-block;
    cursor:pointer;
}
.showbox{
    position:absolute;
    display:block;
    top:0;
    left:150px;
    width:200px;
    height:50px;
    text-align:center;
    border:1px solid black;
    line-height:50px;
}
.parent{
    width:100px;
}

JavaScript

$('.next').on('click', getNext);
    $('.prev').on('click', getPrev);
    $('.item').on('click', addActive);
    $('.test').on('keyup', getInput);
    $('.test').val($('.item.active').index()+1);
    $('.check').on('change', function(){
        if($('.check').prop('checked') == true){
            autoPlay();
        }else{
            stopAutoPlay();
            }
    });
    showInBox();
    window.isActive = false;
    detectMouse();
       


function getNext() {
    if(window.isActive == true)
        return false;
    
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.next().length) ? $curr.next().addClass('active') : $('.item').first().addClass('active');
    $('.test').val($next.index() + 1);
    showInBox();
}

function getPrev() {
    if(window.isActive == true)
        return false;
    
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.prev().length) ? $curr.prev().addClass('active') : $('.item').last().addClass('active');
        $('.test').val($next.index() + 1);
        showInBox();
}
    
function addActive(){
    if(window.isActive == true)
        return false;
    
    $('.item.active').removeClass('active');
    $(this).addClass('active');
    $('.test').val($('.item.active').index() + 1);
    showInBox();
}

function getInput(){
    if(window.isActive == true)
        return false;
    
   var $curr = $('.test').val() - 1;
    if($curr > $('.item').length - 1 || !$.isNumeric($curr)){
        $('.test').val('Nu exista!');        
    }else{
   $('.item.active').removeClass('active');
   $('.item').eq($curr).addClass('active');
            showInBox();
    }
}

function showInBox(){ 
    var $curr = $('.item.active').html();
    window.isActive = true;
    $('.showbox')
        .fadeOut('fast',function(){
            $(this).html($curr).slideDown('slow', function(){
                window.isActive = false;
            });
        });
}

var autop = null;

function autoPlay() {    
     ...