JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="prev">Prev</div>
<div id="next">Next</div>

CSS

#one {
    opacity: 0;
    background: red;
    height: 200px;
    width: 200px;
    position: absolute;
    z-index: 4;
}
#two {
    opacity: 0;
    background: blue;
    height: 200px;
    width: 200px;
    position: absolute;
    z-index: 3;
}
#three {
    opacity: 1;
    background: green;
    height: 200px;
    width: 200px;
    position: relative;
    z-index: 2;
}
#prev {
    background: gray;
    height: 50px;
    width: 50px;
}
#next {
    background: orange;
    height: 50px;
    width: 50px;
}

JavaScript

$('#prev, #next').on('click', function (e) {
    var btn = e.target;
    var current_selected,new_selected;

    $('div').not('#prev, #next').each(function (i, e) {
        if ($(this).css('opacity') == 1) {
            current_selected = parseInt(i);

        }
    });

    if (btn.id == "prev") {
        if (current_selected < 1) {
            console.log('this is first element');
            return;
        } else {
            new_selected = parseInt(current_selected - 1);

        }
    } else {

        var element_length = parseInt($('div').not("#prev, #next").length - 1);
        if (current_selected >= element_length) {
            console.log('this is last element');
            return false;
        } else {
            new_selected = parseInt(current_selected + 1);

        }

    }

    $('div').not("#prev, #next").css({
        'opacity': 0
    });
    $('div')[new_selected].style.opacity = 1;


});