Ошибка очереди анимации карусели

Я пишу простой случай карусели, но у него проблема с анимацией.

Когда вы быстро нажимаете кнопку «Назад» или «Далее», элементы списка также отображаются быстро.

Как это исправить?

код здесь:

Html:

<div id="carousel" class="carousel">
    <div class="pagination">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>
    </div>
    <div class="play">
        <!-- initialize play number -->
    </div>
    <div class="pic">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
    </div>
</div>

Код javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript">
    $(function(){
        var containner=$('#carousel');
        var pagination=containner.find('.pagination');
        var play=containner.find('.play');
        var picList=containner.find('.pic ul li');
        var prev=pagination.find('.prev');
        var next=pagination.find('.next');
        var pageNum=0;
        var defaultAnimateDelay={
            show:800,
            hide:100
        };
        // initialize play number
        (function(picListLength){
            var playHtml='';
            for(var i=0; i<picListLength; i++){
                playHtml+='<a href="#" data-number="'+i+'">'+(i+1)+'</a>';
            }
            play.html(playHtml);
        })(picList.length);
        // 
        function Carousel(pageNumber){
            picList.eq(pageNumber)
            .stop(false,false)
            .animate({
                opacity:'show'
            },defaultAnimateDelay.show).siblings()
            .stop(false,false).animate({
                opacity:'hide'
            },defaultAnimateDelay.hide);
            // add Current class to current play number
            play.find('a')
            .eq(pageNumber)
            .addClass('current')
            .siblings('').removeClass('current');
        }
        // click prev event
        prev.on('click',function(e){
            e.preventDefault();
            if(pageNum===0){
                pageNum=(picList.length-1);
            }else {
                pageNum--;
            }
            Carousel(pageNum);
        });
        // click next event
        next.on('click',function(e){
            e.preventDefault();
            if(pageNum===(picList.length-1)){
                pageNum=0;
            }else{
                pageNum++;
            }
            Carousel(pageNum);
        });
        //  play number 
        play.on('click','a',function(e){
            e.preventDefault();
            pageNum=Number($(this).attr('data-number'));
            Carousel(pageNum);
        });

    });
</script>

Bootstrap carousel js работает хорошо, но не использует функцию остановки jquery.