Responsive Carousel Issue - prependTo Jumps

I am trying to do the responsive carousel which should proportionally hide last item on screen re-size. In the code below everything works fine and does what I want, except one thing. When slide is moving item disappears and quickly appears back the next one in the row. I need to put one item on background and make it invisible somehow, but I could not find the way to do it not loosing centered position of all items.

HTML

<div id="slider-wrapper">
    <div class="slider">
        <div class="slide">
            <div class="item">
                slide1
            </div>
        </div>
        <div class="slide">
            <div class="item alt">
                slide2
            </div>
        </div>
        <div class="slide">
            <div class="item">
                slide3
            </div>
        </div>
        <div class="slide">
            <div class="item alt">
                slide 4
            </div>
        </div>
    </div>  
</div>
<div id="controls">
  <div id="prev">PREV</div>  
  <div id="next">NEXT</div>  
</div>    

CSS

#slider-wrapper {
    position: relative;
    margin: 50px auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height:200px;
}
#slider-wrapper .slider {
    position: relative;
    width: 100%;
}
#slider-wrapper .slide {
    position: relative;
    display: inline-block;
    width: 250px;
    height:200px;
}
.item{
    line-height: 200px;
    background: pink;
}
.item.alt{
    line-height: 200px;
    background: red;
}
#controls{
    position: relative;
    height: 50px;
    width: 220px;
    margin: 0 auto;
}
#controls div{
    position: absolute;
    height: 50px;
    width: 100px;
    background: grey;
    color: white;
    text-align: center;
    line-height: 50px;
}
#next{
    margin-left: 120px;
}

JQuery

var slider = function(){
    var slideWidth = $('.slide').width();
    $('.slide:last-child').prependTo('.slider');
        function moveLeft() {
        $('.slider').animate({
            left: + slideWidth
        }, 200, function () {
            $('.slide:last-child').prependTo('.slider');
            $('.slider').css('left', '');
        });
    };
    function moveRight() {
        $('.slider').animate({
            left: - slideWidth
        }, 200, function () {
            $('.slide:first-child').appendTo('.slider');
            $('.slider').css('left', '');
        });
    };
        $('#prev').on("click",function(){
        moveRight();
    });
    $('#next').on("click",function(){
        moveLeft();
    });
}
$(document).ready(function(){
    slider();
});

Here also a JSFiddle example https://jsfiddle.net/Lv64275r/2/