JSFiddle - React, Tailwind, and code Playground

by ChiBlaaa

HTML

<div class="work">
    <a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
    <a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>
    <a href="#" class="1"><img class="topLeft" src="http://i.imgur.com/JQFbb.jpg" /></a>
    <a href="#" class="2"><img class="topRight" src="http://i.imgur.com/l5OPs.jpg" /></a>
    <a href="#" class="3"><img class="bottomLeft" src="http://i.imgur.com/okxQz.jpg" /></a>
    <a href="#" class="4"><img class="bottomRight" src="http://i.imgur.com/4uPHw.jpg" /></a>
</div>

CSS

/* positioning */
img.topLeft {width:300px; height:240px; border:none;}
img.topRight {width:300px; height:240px; border:none;display:none}
img.bottomLeft {width:300px; height:240px; border:none;display:none}
img.bottomRight {width:300px; height:240px; border:none; display:none}

/* element dimensions */
div.work {background-color: #ddd; height:240px; position: relative; width:300px;  margin-left:10px}



div.work a.leftButton {position:absolute; top:104px; left:-15px; z-index:11;}

div.work a.rightButton {position:absolute; top:104px; right:-15px; z-index:11;}

JavaScript

// prevent click jump
$('a').click(function() {
    return false;
});

// do work
$('.work > .leftButton').click(function() {

    //animate to previous image in the list
    $(this).siblings().prev().show();
     
});

$('.work > .rightButton').click(function() {

    //animate to next image in the list
    $(this).siblings().next().show();
    
});