JSFiddle - React, Tailwind, and code Playground

by Jeremy Gillick

HTML

<div id="top-row">
    <button id="left-button">Left</button>
    <img class="top" src="http://i.imgur.com/JJaPd8V.jpg" />
    <button id="right-button">Right</button>
</div>
<br><br>
<div id="thumbnail-container">   
    <img class="thumbnail selected" src="http://i.imgur.com/JJaPd8V.jpg" />
    <img class="thumbnail" src="http://i.imgur.com/XrZXN.jpg" />
    <img class="thumbnail" src="http://i.imgur.com/2puJ3X8.jpg" />
    <img class="thumbnail" src="http://i.imgur.com/YIT9H.jpg" />
    <img class="thumbnail" src="http://i.imgur.com/qyMix.jpg" />
</div>

CSS

img {
    max-width: 200px;
    max-height: 200px;
}

.top {
    height: 200px;
    width: 200px;
    display: inline;
    margin: auto;
}

#thumbnail-container {
    /*center it*/
}

.thumbnail {
    height: 30px;
    width: 30px;
    display: inline:
}

.selected {
    border: solid;
}

JavaScript

function clickEvent(newImage) {
   var clicked = newImage;
   var current = $('.selected');
   var top = $('.top');
   top.attr('src', clicked.attr('src'));
   current.removeClass('selected');
   clicked.addClass('selected');
}

$('#thumbnail-container img').click(function() {
    clickEvent($(this));
});

$('#left-button').click(function() {
	var selected = $('.selected');
    var top = $('.top');
    var previous;
    if(selected.is(':first-child')) {
        previous = $('#thumbnail-container img:last-child');
    }
    else {
        previous = selected.prev();
    }
    clickEvent(previous);
});

$('#right-button').click(function() {
    var selected = $('.selected');
    var top = $('.top');
    var next;
    if(selected.is(':last-child')) {
        next = $('#thumbnail-container img:first-child');
    }
    else {
        next = selected.next();
    }
    clickEvent(next);
});