为什么jQuery代码将最后一个图像替换为第一个

在这段代码中，一切都很好，但在左右移动滑块后的某个时刻，图像会改变位置。首先替换最后一个图像，有时会在短时间内继续，但有时滑块会长时间工作。。。我想知道这种行为的原因是什么？

var lastBulletActive = 0;
$(document).ready(function() {
  var triggers = $('ul.triggers li');
  var bull = $('ul.triggers li');
  var lastElem = triggers.length - 1;
  var target;
  triggers.first().addClass('active');
  $('#ud_load').animate({
    width: '100%'
  }, 5000);
  function sliderResponse(target) {
    triggers.removeClass('active').eq(target).addClass('active');
    $('#ud_load').stop().css({
      width: '0px'
    });
    $('#ud_load').animate({
      width: '100%'
    }, 5000);
  }
  triggers.click(function() {
    if (!$(this).hasClass('active')) {
      target = $(this).index();
      sliderResponse(target);
      resetTiming();
    }
  });
  $('.left').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length - 1;
    target === 0 ? target = lastElem : target = target - 1;
    sliderResponse(target);
    moveLeft();
    lastBulletActive = $('ul.triggers li.active').index();
    resetTiming();
  });
  $('.right').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    moveRight();
    lastBulletActive = $('ul.triggers li.active').index();
    resetTiming();
  });
  $('#ud_slider ul li:last-child').prependTo('#ud_slider ul');
  bull.click(function() {
    resetTiming();
    var curBulletActive = $(this).index();
    if (curBulletActive < lastBulletActive) {
      var toMove = lastBulletActive - curBulletActive;
      console.log(toMove + " left");
      for (i = 0; i < toMove; i++) {
        moveLeft(100);
      }
    } else if (curBulletActive > lastBulletActive) {
      var toMove = curBulletActive - lastBulletActive;
      console.log(toMove + " right");
      for (i = 0; i < toMove; i++) {
        moveRight(100);
      }
    }
    sliderResponse(curBulletActive);
    lastBulletActive = $('ul.triggers li.active').index();
  });
  defineSize();
  function sliderTiming() {
    target = $('ul.triggers li.active').index();
    lastBulletActive = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    moveRight();
  }
  var timingRun = setInterval(function() {
    sliderTiming();
  }, 5000);
  function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() {
      sliderTiming();
    }, 5000);
  }
  function moveLeft() {
    var slideWidth = $('#ud_slider ul li').width();
    $('#ud_slider ul').animate({
      left: +slideWidth
    }, 500, function() {
      $('#ud_slider ul li:last-child').prependTo('#ud_slider ul');
      $('#ud_slider ul').css('left', '');
    });
  }
  function moveRight() {
    var slideWidth = $('#ud_slider ul li').width();
    $('#ud_slider ul').animate({
      left: -slideWidth
    }, 500, function() {
      $('#ud_slider ul li:first-child').appendTo('#ud_slider ul');
      $('#ud_slider ul').css('left', '');
    });
  }
});
$(window).on("resize", defineSize);
function defineSize() {
  var windowWidth = $(window).width();
  $('.ud_slide, #slider_container').css({
    width: windowWidth
  });
  var slideCount = $('#ud_slider ul li').length;
  var slideWidth = $('#ud_slider ul li').width();
  var sliderUlWidth = slideCount * slideWidth;
  $('#ud_slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });
}

body,
html,
p {
  margin: 0;
  padding: 0;
}
#slider_container {
  position: relative;
  margin: 0 auto;
}
#ud_slider {
  height: 640px;
  overflow: hidden;
}
.ud_slide {
  background-size: cover;
  height: 640px;
  background-position: center;
  background-repeat: no-repeat;
}
#ud_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
#ud_slider ul li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
.ud_slider_1 {
  background-image: url('https://gameonsnacks.com/wp-content/uploads/2013/02/Adam-Diaz.jpg');
}
.ud_slider_2 {
  background-image: url('http://carolinealberoni.files.wordpress.com/2014/04/online-games.jpg');
}
.ud_slider_3 {
  background-image: url('https://watergamespc.weebly.com/uploads/3/0/1/9/30199027/5208331.jpg');
}
.ud_slider_4 {
  background-image: url('http://knowledgeoverflow.com/wp-content/uploads/2013/01/planetside_2_game-wide.jpg');
}
#ud_load {
  background: red;
  height: 5px;
  width: 1px;
  position: absolute;
  bottom: 0;
}
.button {
  position: absolute;
  top: 50%;
  margin-top: -128px;
  cursor: pointer;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.triggers {
  position: absolute;
  bottom: -20px;
  width: 240px;
  padding: 0;
  margin: 0;
  left: 50%;
  margin-left: -120px;
}
ul.triggers li.active {
  background-color: red;
}
ul.triggers li {
  float: left;
  list-style: none;
  margin: 0 5px;
  cursor: pointer;
  background-color: #000;
  width: 50px;
  height: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Vjezbanje</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="slider_container">
    <div id="ud_slider">
      <ul>
        <li>
          <div class="ud_slider_1 ud_slide">
          </div>
        </li>
        <li>
          <div class="ud_slider_2 ud_slide">
          </div>
        </li>
        <li>
          <div class="ud_slider_3 ud_slide">
          </div>
        </li>
        <li class="final">
          <div class="ud_slider_4 ud_slide">
          </div>
        </li>
      </ul>
      <div id="ud_load"></div>
      <div class="button left">
        <img src="img'back.png" />
      </div>
      <div class="button right">
        <img src="img'front.png" />
      </div>
    </div>
    <ul class="triggers">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="js/funkcija3.js"></script>
</body>
</html>