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;
}
#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

var limiteRight = 0 - $('.inner img').width() + $('.image-box').width();
var limiteBottom = 0 - $('.inner img').height() + $('.image-box').height();


$('.slide-right').click(function () {
    if ($('.inner img').position().left - 50 > limiteRight) {
        $('.inner img').animate({
            "left": "-=50px"
        }, "slow");
    } else {
        $('.inner img').animate({
            "left": limiteRight
        }, "slow");
    }
});

$('.slide-bottom').click(function () {
    if ($('.inner img').position().top - 50 > limiteBottom) {
        $('.inner img').animate({
            "top": "-=50px"
        }, "slow");
    } else {
        $('.inner img').animate({
            "top": limiteBottom
        }, "slow");
    }
});

$('.slide-left').click(function () {
    if ($('.inner img').position().left + 50 < 0) {
        $('.inner img').animate({
            "left": "+=50px"
        }, "slow");
    } else {
        $('.inner img').animate({
            "left": "0px"
        }, "slow");
    }
});

$('.slide-top').click(function () {
    if ($('.inner img').position().top + 50 < 0) {
        $('.inner img').animate({
            "top": "+=50px"
        }, "slow");
    } else {
        $('.inner img').animate({
            "top": "0px"
        }, "slow");
    }
});