슬라이드가 이상하게 넘어갑니다

 <div class="content-inner">
            <div class="slide">
                <div class="slide-items">
                    <a href="#none" class="slide-item"><img src="images/slide-01.jpg" alt="slide 01"></a>
                    <a href="#none" class="slide-item"><img src="images/slide-02.jpg" alt="slide 02"></a>
                    <a href="#none" class="slide-item"><img src="images/slide-03.jpg" alt="slide 03"></a>
                </div>
            </div>

.slide-items {
    position: relative;
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 3600px;
    font-size: 0;
}

setInterval(function(){
    $('.slide-items').animate({left: '-1200px'}, function(){
        $('.slide-items').css({left: 0});
        $('.slide-item:first-child').appendTo('.slide-items');
      });
  }, 3500);

제 컴퓨터가 이상한 건지는 모르겠는데 코드 확인 해봐도 도저히 다른 곳이 없는데 뭐가 문제일까요ㅠㅠ 사진이 툭툭 끊기면서 넘어가요