Javascript 停止图像以在导航中移动过远

我创建这个代码笔是为了制作一个带有可拖动和箭头导航的城市导航，它在两个方向（右和左）都可以工作，但我需要找到一种方法在它到达图像末尾时停止

如果有人能告诉我，那就太好了 谢谢

HTML:

CSS:

<div class="row">
  <div class="large-12 columns">

    <span class='leftArrow button secondary' id="left" value='left'><i class="fa fa-chevron-left fa-lg"></i></span>
    <span class='rightArrow button secondary' id="right" value='right'><i class="fa fa-chevron-right fa-lg"></i></span>
    <span class='topArrow button secondary' id="top" value='top'><i class="fa fa-chevron-up fa-lg"></i></span>
    <span class='bottomArrow button secondary' id="bottom" value='bottom'><i class="fa fa-chevron-down fa-lg"></i></span>

    <div class="wrapper-general">

      <div id="wrapper">
        <div id="parent">

          <div id="div1">

          </div>

        </div>
      </div>

    </div>

  </div>
</div>

    $(document).foundation(); 

    wrapper = $("#wrapper"),
    parent = $("#parent"),
    div1 = $("#div1"),
    childX = $("#childX"),
    childY = $("#childY");

  //set wrapper perspective
  TweenLite.set(wrapper, {
    perspective: 500
  });


  /** draggable instance **/

  Draggable.create(div1, {
    type: 'x,y',
    bounds: parent,
    edgeResistance: 1,
    onDrag: function() {
      childX.html(this.x);
      childY.html(this.y);
    }
  });
  Draggable.get("#div1").vars.cursor = "grabbing"; //or whatever

  $(function () {

        $("#right, #left").click(function () {
            var dir = this.id == "right" ? '+=' : '-=';
            var wid = $("#div1").width();
            TweenLite.to("#div1", 2, {x:dir + -wid/2})
        });

  });

  body{
    height: 100%;
    width: 100%;
  }
  .row {
      width: 100%;
      margin: 0px auto;
      max-width: 100%;
      height: 100%;
  }
    .column, .columns {
        position: relative;
        padding-left: 0em;
        padding-right: 0em;
        float: left;
        height: 100%;
        width: 100%;
    }  

#wrapper {
  width: 100%;
  height: 100%;
  right: 0%;
  top:0%;
  position: relative;
}

#parent {
  width: 100%;
  height: 100%;
  background: #00f;
  position: relative;
  border-radius: 0px;
  border: solid 0px white;
  right: 0px;
}

#div1 {
  width: 3224px;
  height: 2007px;  
      left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
  background-image: url("https://xphub-resources.s3.amazonaws.com/customer/7dd00ec1-187f-42c2-859c-918d671a2895/img/NH_cidade.jpg");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  right: 0%;

}

.wrapper-general {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

#right {
    position: absolute;
    right: 0px;
    top: 50%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

#left {
    position: absolute;
    left: 0px;
    top: 50%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

#top {
    position: absolute;
    left: 50%;
    top: 0%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

#bottom {
    position: absolute;
    left: 50%;
    bottom: 0%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

$(function () {

        $("#right, #left").click(function () {
            var dir = this.id == "right" ? '+=' : '-=';


          var wid = $("#div1").width();

          //GET DIV POSITION
          var pos = parseInt($("#div1").position().left)*-1;
          //GET ACTUAL POSITION
          var div_wid = parseInt(wid) - parseInt(pos) 

          //CHECKING
          if(this.id == "right" && pos >= div_wid)
            return;
          if(this.id == "left" && pos <= 0)
            return;

            TweenLite.to("#div1", 2, {x:dir + -wid/2})
        });

  });

if(this.id == "right" && pos == div_wid){
    return;
}else{
    if(pos + "the number of pixel you are moving" >= div_wid)
        where_to_move = max_right_position;
}