JSFiddle - React, Tailwind, and code Playground

HTML

<input type="hidden" id="iNames"
        value="IMG1.jpg,IMG2.jpg,IMG3.jpg">
    <img class="pic" />
    <div class="links">
        <label class="prev">Prev</label>
        <a class="dLink" href="#" download>
           <label>Download</label>
        </a>
        <label class="next">Next</label>
    </div>

JavaScript

iNames = ($("#iNames").val()).split(",");
                    total = iNames.length;
                    i = 0;
                    $("img.pic").attr("src",iNames[i]);
                    $("a.dLink").attr("href", $("img.pic").attr("src"));
                    $(document).keydown(function(e) {
                        console.log("key down");
                        switch (e.which) {
                        case 37: // left
                            prev();
                            break;

                        case 39: // right
                            next();
                            break;
                        case 40: // down
                            $("a.dLink")[0].click();
                            break;
                        default:
                            return; 
                        }
                    });

                    function next() {
                        i = i == total - 1 ? 0 : i + 1;
                        setImage();
                    }
                    function prev() {
                        i = i == 0 ? total - 1 : i - 1;
                        setImage();
                    }
                    function setImage() {
                        $("img.pic").attr("src",iNames[i]);
                        $("a.dLink").attr("href", $("img.pic").attr("src"));
                    }
                    $("label.next").click(function() {
                        next();
                    });
                    $("label.prev").click(function() {
                        prev();
                    });