JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<ul id="thumbnail">
  <li><a href="http://i.imgur.com/RHhXG.jpg" class="thumbnail"><img src="http://i.imgur.com/g7Ljc.jpg" width="100" height="100" /></a></li>
  <li><a href="http://i.imgur.com/p1L2e.jpg" class="thumbnail"><img src="http://i.imgur.com/ZLjwJ.jpg" width="100" height="100" /></a></li>
  <li><a href="http://i.imgur.com/NsrI0.jpg" class="thumbnail"><img src="http://i.imgur.com/qN3JG.jpg" width="100" height="100" /></a></li>
  <li><a href="http://i.imgur.com/Ww6EU.jpg" class="thumbnail"><img src="http://i.imgur.com/CRsHb.jpg" width="100" height="100" /></a></li>  
</ul>
<div id="fullimage">
 <img class="fullimage" src="http://i.imgur.com/RHhXG.jpg" />
 <img class="fullimage" src="http://i.imgur.com/p1L2e.jpg" />
 <img class="fullimage" src="http://i.imgur.com/NsrI0.jpg" />
 <img class="fullimage" src="http://i.imgur.com/Ww6EU.jpg" /> 
</div>
</div>
<a href="#"><label id="prev">previous</label></a>
<a href="#"><label id="next">next</label></a>

CSS

#wrapper { width:520px; overflow:hidden; padding:10px;}
#thumbnail { width:500px; border:2px solid #ddd; padding:10px 5px 5px 5px; overflow:hidden; margin:0 0 10px 0; text-align:center;  }
#thumbnail li {  width:100px; height:100px; border:1px solid #ddd; display:inline-block; margin:0 10px; }
#fullimage { width:500px; border:2px solid #ddd; padding:5px 5px 0 5px; overflow:hidden;}
.fullimage { display:none; }

JavaScript

$('#fullimage img.fullimage:first-child').fadeIn();

var curr = $('#fullimage img.fullimage:first-child');

$('#next').on('click', function() {
    curr.hide();
    var next = curr.next();
    if (next.length == 0) next = $('#fullimage img:first');
    next.fadeIn();
    curr = next;
    return false;
});

$('#prev').on('click', function() {
    curr.hide();
    var prev = curr.prev();
    if (prev.length == 0) prev = $('#fullimage img:last');
    prev.fadeIn();
    curr = prev;
    return false;
});