jquery - Jquery - カルーセルの前へボタン

Question

次へのボタンは問題ありませんが、前へのボタンはスムーズにジャンプしません。

HTML

<div class="slide">
        <ul class="wrap-all">
            <li>
                <img src="index.jpg" alt="" />
            </li>
            <li>
                <img src="index1.jpg" alt="" />
            </li>
            <li>
                <img src="index2.jpg" alt="" />
            </li>
            <li>
                <img src="index3.jpg" alt="" />
            </li>
        </ul>
        <div class="arrow">
            <a href="#" class="pre">Previous</a>    
            <a href="#" class="next">Next</a>
        </div>
</div>

CSS

.slide{
     width: 550px;
     margin: 0 auto;
     height: 130px;
     border: 1px solid #cccccc;
     overflow: hidden;
     position: relative;
 }
 ul.wrap-all{
     list-style: none;
     position: relative;
 }
 ul.wrap-all li{
     float: left;
     width: 275px;

 }
 .next{
     position: absolute;
     top: 50%;
     right: 0;
     color: white;
 }
 .pre{
     position: absolute;
     top: 50%;
     left: 0;
     color: white;
 }

JS

$(document).ready(function () { 
    var itemWidth = $('.wrap-all li').outerWidth(true);
    var imageLength = $('.wrap-all li').length;
    var totalImage = itemWidth * imageLength;
    $('.wrap-all').css('width', totalImage);      
        $('.next').click(function(e){
            e.preventDefault();
            $('.wrap-all:not(:animated)').animate({
             left: -itemWidth
            },200,
            function(){
                $('.wrap-all li:last').after($('.wrap-all li:first'));
                $('.wrap-all').css({'left': 0});
            });
        });
        $('.pre').click(function(e){
            e.preventDefault();
           $('.wrap-all:not(:animated)').animate({'left' : +itemWidth}, 200,function(){
            $('.wrap-all li:first').before($('.wrap-all li:last'));
            $('.wrap-all').css({'left' : 0});
            });
        });
     });