JS + JQ событие клавиш

//JQ 
$( document ).ready(function() { 
     
   var numberPicture = 0; 
       
	var start = 0, timeScroll = 150, 
    	denominator = 1.6, description = $(".js-description>p"), 
        baseline = $( window ).height() / denominator;        
    	 
	$( document ).on('scroll', function() { 
    	$( document ).click(); 
    	if ( $(this).scrollTop() > baseline ) { 
        	if ( start == numberPicture ) { 
        		description.eq( start ).fadeIn( timeScroll ); 
        	} else { 
            	description.eq( numberPicture ).fadeIn( timeScroll ); 
            } 
        } else { 
        	description.fadeOut( timeScroll ); 
        } 
    }); 
     
     
     
    var section = 2, timeText = 100, 
        cssMinus = "-=100%", styleShift = "swing", 
        out$a = ":first-child", out$b = ":last-child", 
        timeSlide = 500, cssZero = 0, cssPlus = "+=100%", 
        clickHere = $("img.picture"), pictureBox = $(".js-exhibition"), 
        middle =  pictureBox.width() / section; 
         
    clickHere.on('click', function( exhibition ) { 
    	  
         	numberPicture = $(this).index(); 
          
         	var feeling = exhibition.pageX; 
            if ( feeling > middle){ 
            	if ( $(this).is( out$b )){ 
                	$(this).add($(this).prev()).animate({ left: cssPlus}, timeSlide); 
                     description.eq( numberPicture ).add(description.eq( --numberPicture )).fadeToggle( timeText, styleShift); 
                } else { 
            		$(this).add($(this).next()).animate({ left: cssMinus}, timeSlide); 
                    description.eq( numberPicture++ ).add(description.eq( numberPicture )).fadeToggle( timeText, styleShift); 
					 
            	}} 
            if ( feeling < middle ) { 
            	if ( $(this).is( out$a )){ 
                	$(this).add($(this).next()).animate({ left: cssMinus}, timeSlide); 
                    description.eq( numberPicture++ ).add(description.eq( numberPicture )).fadeToggle( timeText, styleShift); 
                    //$('a').text(numberPicture++); 
                } else { 
            		$(this).add($(this).prev()).animate({ left: cssPlus}, timeSlide); 
                    description.eq( numberPicture ).add(description.eq( --numberPicture )).fadeToggle( timeText, styleShift); 
                    
            }} 
    }); 
 
    $( window ).keydown(function( viewPage ) { 
    	if ( viewPage.keyCode == 74 ) { 
        	$('a').text( numberPicture ); 
        } 
        //to left 
        if ( viewPage.keyCode == 37 ) { 
        	 
       	} 
        //to right 
        else  if ( viewPage.keyCode == 39 ) { 
        
    	} 
    });  
});

*{ 
    margin:0; 
    padding:0; 
} 
body{ background:rgb(46,46,46); 
} 
.js-description { 
    position: fixed; 
    z-index: 3; 
} 
 
.js-description>p { 
    position: absolute; 
    display: none; 
    color: black; 
    width: 30vw; 
    top:0; 
} 
 
.js-description>p:nth-child(3) { 
    color: black; 
} 
 
.js-exhibition { 
    position: relative; 
    overflow: hidden; 
    width: 100vw; 
    height: 100vh; 
    z-index: 1; 
    top: 96vh; 
} 
 
img.picture { 
    position: absolute; 
    width: 100vw; 
    left: 100vw; 
} 
 
img.picture:nth-child(1) { 
    left: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="js-description"> 
    <p class="indent"> 
        Head<br>Text - 1<br> 
        <a class="material-icons" href="#">x</a> 
    </p> 
    <p class="indent"> 
        Head<br>Text - 2<br> 
        <a class="material-icons" href="#">x</a> 
    </p> 
    <p class="indent"> 
        Head<br>Text -3<br> 
        <a class="material-icons" href="#">x</a> 
    </p> 
</div> 
 
<div class="js-exhibition"> 
    <img class="picture" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1c3d6a34857211.56e04e5a16466.jpg" alt="X5 Retail Group" /> 
    <img class="picture" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/06f6e534857211.56e04e5a17d48.jpg" alt="Кофейная компания — Музей" /> 
    <img class="picture" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/e9b1a534857211.56e04e5a169cc.jpg" alt="Мыс Когг" /> 
</div>