Simpler Jquery Slider code improvement

Question

I have coded a simple Prev-Next Button slider using Jquery, The next button is working properly but when we click Prev button quickly multiplet times than it Doesn't wait for animation to complete and start showing white space...

Fiddle:- https://jsfiddle.net/pnjcr6sw/

Code:-

Css

<style>
    *{ margin:0; padding:0; box-sizing:border-box;}
    .slider { width:320px; overflow:hidden; margin:50px 0 0 50px; max-width:100%;}
    .slider ul { float:left;}
    .slider li { float:left; list-style:none;}
    .pager{ float:left; margin:5px;}
    .pager span { width:15px; height:15px;background:#000; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; color:#fff;}
    .pager span.active { background-color:#f00;}
</style>

HTML

<div class="slider">
    <ul>
        <li title="First"><img src="story1.jpg" alt=""></li>
        <li title="Second"><img src="story2.jpg" alt=""></li>
        <li title="Last"><img src="story3.jpg" alt=""></li>
    </ul>
    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>
</div>

JS

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function() {

        var slider_w = $('.slider').width();
        var total_li = $('.slider li').length
        var total_w = $('.slider').width()*total_li
        $('.slider ul').width(total_w);
        // counter

        // next button
        $('a.next').click(function(){
            $('.slider ul').animate({marginLeft:'-' + slider_w }, function(){
                $('.slider li:first').appendTo('.slider ul');
                $('.slider ul').css('margin-left','0');
            });
        });

        //prev button
        $('a.prev').click(function(){
            $('.slider li:last').prependTo('.slider ul')
            $('.slider ul').css('margin-left','-=' + slider_w )    
            $('.slider ul').animate({marginLeft:'+=' + slider_w})
        });
    });
</script>

Answer 1

You could try to use if ($(elem).not(':animated')) { // more animation }. Check out the documentation for more details on this: (http://api.jquery.com/animated-selector/)

Answer 2

Just check if your animation is still running.

if( $('.slider ul').is(':animated') ) { ... }

And then add return; to stop the prev click handler from doing it's thing.

$(document).ready(function() {

var slider_w = $('.slider').width();
var total_li = $('.slider li').length
var total_w = $('.slider').width()*total_li
$('.slider ul').width(total_w);
// counter

// next button
$('a.next').click(function(){
$('.slider ul').animate({marginLeft:'-' + slider_w }, function(){
	$('.slider li:first').appendTo('.slider ul');
	$('.slider ul').css('margin-left','0');
});
});

//prev button
$('a.prev').click(function(){
    if( $('.slider ul').is(':animated') ) {
        return;
    }
$('.slider li:last').prependTo('.slider ul')
$('.slider ul').css('margin-left','-=' + slider_w )	
$('.slider ul').animate({marginLeft:'+=' + slider_w})
});

});

*{ margin:0; padding:0; box-sizing:border-box;}
.slider { width:320px; overflow:hidden; margin:50px 0 0 50px; max-width:100%;}
.slider ul { float:left;}
.slider li { float:left; list-style:none;}
.pager{ float:left; margin:5px;}
.pager span { width:15px; height:15px;background:#000; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; color:#fff;}
.pager span.active { background-color:#f00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li title="First"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li>
<li title="Second"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li>
<li title="Last"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li>
</ul>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>