自定义 jQuery 轮播过渡错误

var $elm = $('.slider'),
        $slidesContainer = $elm.find('.slider-container'),
        slides = $slidesContainer.children('a'),
        slidesCount = slides.length,
        slideHeight = $(slides[0]).find('img').outerHeight(false);
    
    //Set slide height
    $(slides).css('height', slideHeight);
    
    // Append bullets
    for (var i = 0; i < slidesCount; i++) {
        var bullets = '<a href="#">' + i + '</a>';
        if (i == 0) {
            // active bullet
            var bullets = '<a href="#" class="activeSlide">' + i + '</a>';
            // active slide
            $(slides[0]).addClass('active');
        }
        $('.slider-nav').append(bullets);
    }
    
    // Set (initial) z-index for each slide
    var setZindex = function () {
        for (var i = 0; i < slidesCount; i++) {
            $(slides[i]).css('z-index', slidesCount - i);
        }
    }
    setZindex();
    
    var displayImageBeforeClick = null;
    
    $('.slider-nav a').on('click', function () {
        displayImageBeforeClick = $(".slider-container .active");
        activeIdx = $(this).text();
        if($(slides[activeIdx]).hasClass("active")){ return false; }
        $('.slider-nav a').removeClass('activeSlide');
        $(this).addClass('activeSlide');
        setActiveSlide();
        slideUpDown();
    });
    
    var setActiveSlide = function () {
        $(slides).removeClass('active');
        $(slides[activeIdx]).addClass('active');
    }
    
    var slideUpDown = function () {
        // set top property for all the slides
        $(slides).not(displayImageBeforeClick).css('top', slideHeight);
        // then animate to the next slide
        $(slides[activeIdx]).animate({
            'top': 0
        });
    
        $(displayImageBeforeClick).animate({
            'top': "-100%"
        });
    }

body {
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.slider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider .slider-nav {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 30;
}

.slider .slider-nav a {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  text-indent: -9999px;
  background: #fff;
}

.slider .slider-nav a.activeSlide {
  background: transparent;
  border: 2px solid #fff;
}

.slider .slider-container {
  width: 100%;
  text-align: center;
}

.slider .slider-container a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.slider .slider-container img {
  transform: translateX(-50%);
  margin-left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="container">
  <div class="slider slider-homepage">
    <div class="slider-nav"></div>
    <div class="slider-container">
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=north" alt="">
      </a>
    </div>
  </div>
</div>