JSFiddle - React, Tailwind, and code Playground

by davetayls

HTML

<div class='picture_holder'>
    <img src='http://lorempixel.com/400/200/sports' alt='y' />
</div>
click here then use l/r keys

JavaScript

$(function() {
    // convert this in to a web service for infinate images
    var images = [
            'http://lorempixel.com/400/200/people',
            'http://lorempixel.com/400/200/food',
            'http://lorempixel.com/400/200/animals'        
        ],
        i = 0;
    
    // ideally you will probably want to use 2 image elements and alternate between them so you can animate the new one in...i'll let you work that one out
    $(document).keyup(function(e) {
        switch(e.keyCode) {
            case 37 : 
                $('img').attr('src', i === 0 
                              ? images[images.length -1] 
                              : images[i--] );
                break;
            case 39 :
                $('img').attr('src', i >= images.length -1 
                              ? images[i=0] 
                              : images[i++] )
                break; 
        }
        // just to show what's happening
        $('body').append('<div>'+i+'</div>');
    });
});