Jquery Slider, перемещение от первого изображения к последнему - Можна получить ответ ? По данному вопросу

не получается перейти с первой картинки на последнюю. Проблема не в slideRight() а в slideLeft() . с первой картинки перейти на последнюю.

$(function () {

  var width = 920;
  var animationSpeed = 1000;
  var pause = 3000;
  var currentSlide = 1;
  var currentminSlide = -1;

  var $slider = $("#slider");
  var $sliderContainer = $slider.find(".slides");
  var $slides = $sliderContainer.find(".image");
  var $butright = $("#next");
  var $butleft = $("#prev");

  var interval;

  function startSlider() {
    interval = setInterval(function () {
      $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
        currentSlide++;
        if (currentSlide == $slides.length) {
          currentSlide = 1;
          $sliderContainer.css('margin-left', 0);
        }
      });
    }, pause);
  }
  function stopSlider() {
    clearInterval(interval);
  }

  //mouse hower 
  $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
  startSlider();

  function slideRight() {            
    $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
      currentSlide++;
      if (currentSlide == $slides.length) {
        currentSlide = 1;
        $sliderContainer.css('margin-left', 0);
      }
    });
}

    function slideLeft() {
      $sliderContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function () {
        currentSlide--;
        if (currentSlide == $slides.length) {
          currentSlide = -1;                       
        }                   
      });             
    }

    //next slide
    $($butright).click(function () {
      stopSlider();
      slideRight();
      startSlider();
    });

    //previous slide
    $($butleft).click(function () {
      stopSlider();
      slideLeft();
      startSlider();
    });    
  });



body, html {
  margin: 0;
  padding: 0;
}

#slider {
  width: 920px;
  height: 500px;
  margin: auto;
  overflow: hidden;
  background: #4b6f8a;
}

#slider .slides {
  display: block;
  width: 7700px;
  height: 700px;
  margin: 0;
  padding: 0;
}

#slider .image {
  float: left;
  list-style-type: none;
  width: 920px;
  height: 500px;
}

img {
  width: 100%;
}





 <div id="slider">
        <ul class="slides">
            <li class="image"><img src="http://srv2.jpg.co.il/7/54fa0685aeab8.jpg" /></li>
            <li class="image"><img src="http://magdeleine.co/wp-content/uploads/2015/03/6350753171_7f697d8014_o-1400x1400.jpg" /></li>
            <li class="image"><img src="http://magdeleine.co/wp-content/uploads/2015/03/2734222601_93aa7fd06c_o-1400x1400.jpg" /></li>
            <li class="image"><img src="http://magdeleine.co/wp-content/uploads/2015/03/2734224007_fa442a0ac1_o-1400x1400.jpg" /></li>
            <li class="image"><img src="http://srv2.jpg.co.il/7/54fa0685aeab8.jpg" /></li>
        </ul>
    </div>

    <button id="prev">prev</button>
    <button id="next">next</button>