JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imgIndex"></div>
<div>
    <input type="button" id="prev" value="Prev" />
    <input type="button" id="next" value="Next" />
</div>

JavaScript

var imgArray = ['img1', 'img2', 'img3', 'img4', 'img5'];
var imgIndex = 3;

$(document).ready(function() {
    var $img = $("#imgIndex");
    $img.text(imgIndex);
    //alert(imgIndex);

    $(document).keydown(function(e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) {
            imgIndex++;
            if (imgIndex > imgArray.length - 1) {
                imgIndex = 0;

            }
            //img.src = imgArray[imgIndex];
             $img.text(imgIndex);
        }
        if (key == leftarrow) {
            if (imgIndex == 0) {
                imgIndex = imgArray.length;
            }

            //img.src = imgArray[--imgIndex];
            $img.text(--imgIndex);
        }
    });

    $("#next").click(function() {
        imgIndex++;
        if (imgIndex > imgArray.length - 1) {
            imgIndex = 0;
        }
        $img.text(imgIndex);
        //img.src = imgArray[imgIndex];
    });
    $("#prev").click(function() {
        if (imgIndex == 0) {
            imgIndex = imgArray.length;
        }
        $img.text(--imgIndex);
        //img.src = imgArray[--imgIndex];
    });
});