JSFiddle - React, Tailwind, and code Playground

by henser

HTML

<div class="gs-wrapper">
    <div class="gs-cover hidden">
        <img src="http://placehold.it/200x160/00f">
    </div>
    <div class="gs-cover hidden">
        <img src="http://placehold.it/200x160/ff0">
    </div>
    <div class="gs-cover">
        <img src="http://placehold.it/200x160/0ff">
    </div>
    <div class="gs-cover">
        <img src="http://placehold.it/200x160/f00">
    </div>
    <div class="gs-cover">
        <img src="http://placehold.it/200x160/0f0">
    </div>
    <div class="gs-cover active">
        <img src="http://placehold.it/200x160/00f">
    </div>
    <div class="gs-cover">
        <img src="http://placehold.it/200x160/ff0">
    </div>
    <div class="gs-cover">
        <img src="http://placehold.it/200x160/0ff">
    </div>
    <div class="gs-cover">
        <img src="http://placehold.it/200x160/f00">
    </div>
    <div class="gs-cover hidden">
        <img src="http://placehold.it/200x160/0f0">
    </div>
    <div class="gs-cover hidden">
        <img src="http://placehold.it/200x160/00f">
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.gs-wrapper {
   display: table;
   margin: 0 auto;
   width: auto;
   height: 100%;
}

.gs-cover {
    display: table-cell;
    width: 100px;
    height: 80px;
   current background-color: #f5f5f5;
    vertical-align: middle;
    padding: 5px;
}

.gs-cover.hidden{
    display:none;
}

.gs-cover > img{
    width: 100px;
    height: 80px;
}

.gs-cover.active > img{
    width: 120px;
    height: 100px;
}

JavaScript

function showHideCovers() {
    var $gsCover = $('.gs-cover.active');
    
        $gsCover.nextUntil().eq(2).removeClass('hidden').nextAll().addClass('hidden');
        $gsCover.prevUntil().eq(2).removeClass('hidden').prevAll().addClass('hidden');
}

function leftKey() {
    if ($('.gs-cover.active').index() !== 0) {
        $('.gs-cover.active').removeClass('active').prev().addClass('active');
        showHideCovers();
    }
}

function rightKey() {
    var childLength = $('.gs-wrapper').children().length;
    if ($('.gs-cover.active').index() !== childLength-1) {
        $('.gs-cover.active').removeClass('active').next().addClass('active');
       showHideCovers();
    }
}

$(document).ready(function(){
    $(document).on('keydown', function(e) {
        switch (e.keyCode) {
            case 37:
                leftKey();
                break;
            case 39:
                rightKey();
                break;
        }
    });
});