JS滑块错误

Question

jQuery(document).ready(function($) {


  var sliderContentCount = $(".slider-container").length;
  $(".slider-wrap").css("width", sliderContentCount + "00%");

  var sliderContentWidth = 100 / sliderContentCount;
  $(".slider-container").css("width", sliderContentWidth + "%");

  var marginLimit = -(sliderContentCount - 1) * 100;
  var marginRight = 0;
  var marginLeft = 0;


  $(".right-nav").click(function() {
    if (marginRight != marginLimit) {

      marginRight += -100;
    }

    var slideLeft = marginRight + "%";

    $(".slider-wrap").css("margin-left", slideLeft);

    if (marginRight == marginLimit) {

      $(".right-nav").click(function() {
        $(".slider-wrap").animate({
          "margin-left": "0%"
        }, 1000);
        marginRight = 0;
      })
    }
  })

  $(".left-nav").click(function() {

    if (marginRight <= 0) {

      marginRight += 100;

      if (marginRight <= 0) {
        marginLeft = marginRight;
      }

    }

    var slideRight = marginLeft + "%";

    $(".slider-wrap").css("margin-left", slideRight);

  })

});

.left-nav {
  z-index: 1;
  position: absolute;
  top: 50%;
  background-color: black;
  float: left;
  text-align: center;
  color: white;
  padding: 2%;
  cursor: pointer;
}

.right-nav {
  z-index: 1;
  padding: 2%;
  position: absolute;
  top: 50%;
  background-color: black;
  right: 0.5%;
  text-align: center;
  color: white;
  cursor: pointer;
}

.slider-outer-wrap {
  height: 100%;
  overflow: hidden;
  border: 2px solid black;
}

.slider-wrap {
  float: left;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}

.slider-container {
  width: 25%;
  float: left;
  text-align: center;
}

.slider-container img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-outer-wrap">
  <div class="left-nav">
    <</div>
      <div class="slider-wrap">
        <div class="slider-container">
          <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
        </div>
        <div class="slider-container">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg">
        </div>
        <div class="slider-container">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg">
        </div>
        <div class="slider-container">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg">
        </div>
      </div>
      <div class="right-nav">></div>

问题是，当用户点击最后一张幻灯片的右侧导航时，它的左边距离变为0，此后我的右导航js停止工作（它不再滑动）。 请让我知道我在哪里做错了或我如何改进这个。并且请提供建议，使其仅在加载时使用这些代码进行自动播放。 提前谢谢你。