JSFiddle - React, Tailwind, and code Playground

by lhoeppner

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 inner = $(".inner").first();
        var divTop = inner.offset().top;
        var divLeft = inner.offset().left;
        var divRight = divLeft + inner.width();
        var divBottom = divTop + inner.height();

        function getImagePosition() {
            var image = $("#image");
            var imageTop = image.offset().top;
            var imageLeft = image.offset().left;

            return {
                top: imageTop,
                left: imageLeft,
                right: imageLeft + image.width(),
                bottom: imageTop + image.height()
            }
        }

        $('.slide-right').click(function () {
            var imagePosition = getImagePosition();

            var nextImageRight = imagePosition.right - 50;
            if (nextImageRight >= divRight) {
                $('.inner img').animate({
                    "left": "-=50px"
                }, "slow");
            }
        });

        $('.slide-bottom').click(function () {
            var imagePosition = getImagePosition();

            var nextImageBottom = imagePosition.bottom - 50;
            if (nextImageBottom >= divBottom) {
                $('.inner img').animate({
                    "top": "-=50px"
                }, "slow");
            }
        });

        $('.slide-left').click(function () {
            var imagePosition = getImagePosition();

            var nextImageLeft = imagePosition.left + 50;
            if (nextImageLeft <= divLeft) {
                $('.inner img').animate({
                    "left": "+=50px"
                }, "slow");
            }
        });

        function scrollTop() {
            var imagePosition = getImagePosition();

            var nextImageTop = imagePosition.top + 50;
            if (nextImageTop <= divTop) {
                $('.slide-top').off("click");

                $('.inner img').animate({
                    "top": "+=50px"
                }, "slow", function () {
                   ...