JSFiddle - React, Tailwind, and code Playground

by bighostkim

HTML

<div id="contentslider">
    <div class="cs_wrapper">
        <div class="cs_slider">
            <div id=1 class="cs_article">
                SLIDE 1
            </div>
            <div id=2 class="cs_article">
                SLIDE 2
            </div>
            <div id=3 class="cs_article">
                SLIDE 3
            </div>
            <div id=4 class="cs_article">
                SLIDE 4
            </div>
        </div>
    </div>
</div>

JavaScript

$(".cs_article").hide();
$(".cs_article").eq(0).show();
$(window).keydown(function(e) {
    curSlide = $(".cs_slider .cs_article:visible");
    console.log(e.which);
    console.log([curSlide, curSlide.prev(), curSlide.next()]);
    if (e.which==37 &&  curSlide.prev()[0]) { 
        curSlide.hide(); curSlide.prev().show();
    } else if (e.which==39 && curSlide.next()[0]) {
        curSlide.hide(); curSlide.next().show();
    }
})