JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
			<div class="image-box">
				<div class="inner"><img alt="" src="http://s15.postimg.org/5phzr2off/img.jpg" id="image" /></div>
				<div id="arrow-up"><a href="javascript:void(0);" class="slide-top"><img alt="" src="http://s24.postimg.org/gr2uv14d1/arrow_top.png" /></a></div>
				<div id="arrow-right"><a href="javascript:void(0);" class="slide-right"><img alt="" src="http://s24.postimg.org/ruda95avp/arrow_right.png" /></a></div>
				<div id="arrow-bottom"><a href="javascript:void(0);" class="slide-bottom"><img alt="" src="http://s10.postimg.org/n8hv0166x/arrow_bottom.png" /></a></div>
				<div id="arrow-left"><a href="javascript:void(0);" class="slide-left"><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-right').click(function() {      
        if (parseInt($('.inner img').css('left')) >= -700) {
		    $('.inner img').finish().animate({ "left": "-=50px" }, "slow" );
        }
	});

	$('.slide-bottom').click(function() {
        if (parseInt($('.inner img').css('top')) >= -249) {
		    $('.inner img').finish().animate({ "top": "-=50px" }, "slow" );
        }
	});

	$('.slide-left').click(function() {
        if (parseInt($('.inner img').css('left')) < -49) {
		    $('.inner img').finish().animate({ "left": "+=50px" }, "slow" );
        }
    });

	$('.slide-top').click(function() {
        if (parseInt($('.inner img').css('top')) < -49) {
		    $('.inner img').finish().animate({ "top": "+=50px" }, "slow" );
        }
	});