JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<div id="panel_1">
     <h1>First Panel</h1>
</div>
<div id="panel_2">
     <h1>Second Panel</h1>
</div>
<div id="panel_3">
     <h1>Third Panel</h1>
</div>
<div id="panel_4">
     <h1>Fourth Panel</h1>
</div>

CSS

html, body, div {
    height: 100%;
    overflow: hidden;
}

div {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    z-index: 1;
}
.active {
    z-index: 2;
    left: 0;
}
#panel_1 {
    background-color: red;
}
#panel_2 {
    background-color: blue;
}
#panel_3 {
    background-color: yellow;
}
#panel_4 {
    background-color: green;
}

JavaScript

var current_layer = 1,
    $all_layers = $('[id^="panel_"]'),
    total_layers = $all_layers.length;

function move_layer (dir) {
    current_layer += dir; 
    if (current_layer < 1) current_layer = total_layers;
    else if (current_layer > total_layers) current_layer = 1;
    
    $all_layers.removeClass('active');
    $('#panel_' + current_layer).addClass('active');
}

// one event === good
$("body").keydown(function(e) {
    if (event.which == 39) move_layer(1);
    if (event.which == 37) move_layer(-1);
});

move_layer(0);