JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div class="image-box">
        <div class="inner" style="height:500px;">
            <img alt="" src="http://s15.postimg.org/5phzr2off/img.jpg" id="image" />
        </div>
        <div id="arrow-up"><a href="javascript:void(0);" class="slide" data-direction="top" data-movement="+=50"><img alt="" src="http://s24.postimg.org/gr2uv14d1/arrow_top.png" /></a>

        </div>
        <div id="arrow-right"><a href="javascript:void(0);" class="slide" data-direction="left" data-movement="-=50"><img alt="" src="http://s24.postimg.org/ruda95avp/arrow_right.png" /></a>

        </div>
        <div id="arrow-bottom"><a href="javascript:void(0);" class="slide" data-direction="top" data-movement="-=50"><img alt="" src="http://s10.postimg.org/n8hv0166x/arrow_bottom.png" /></a>

        </div>
        <div id="arrow-left"><a href="javascript:void(0);" class="slide" data-direction="left" data-movement="+=50"><img alt="" src="http://s2.postimg.org/qrpm662u1/arrow_left.png" /></a>

        </div>
    </div>
</div>

CSS

.image-box {
    width: 500px;
    height: 500px;
    margin: 60px auto 0 auto;
    overflow: hidden;
    position: relative;
}
#image {
    position: relative;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}
#arrow-up, #arrow-right, #arrow-bottom, #arrow-left {
    position: absolute;
}
#arrow-up {
    top: 0px;
    left: 150px;
    width: 200px;
    height: 60px;
    z-index: 10;
}
#arrow-right {
    right: 0px;
    top: 150px;
    width: 60px;
    height: 200px;
    z-index: 11;
}
#arrow-bottom {
    bottom: 0px;
    left: 150px;
    width: 200px;
    height: 60px;
    z-index: 12;
}
#arrow-left {
    left: 0px;
    top: 150px;
    width: 60px;
    height: 200px;
    z-index: 13;
}

JavaScript

$('.slide').click(function () {
	    var sliding = {}
	    sliding[$(this).data('direction')] = $(this).data('movement');
	    $('.inner img').animate(
	    sliding, "slow");
	});