Fast click on next makes slider go out of screen

Question

Here is code:

html

<div class="slider">
    <ul class="slider-list">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
        <li>
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
        <li>
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
    </ul>
</div>
<div class="controls">
    <span class="prev controls-button">prev</span>
    <span class="next controls-button">next</span>
</div>

css

.slider{
    width: 900px;
    margin: 0 auto 40px;
    position: relative;
    height: 400px;
    overflow: hidden;
}

.slider-list{
    position: absolute;
    width: 100000px;
    left: 0;
    top: 0;
}

.slider-list li{
    display: block;
    float: left;
    width: 820px;
    height: 320px;
    color: #fff;
    font: 20px/28px arial;
    padding: 40px;
    text-align: center;
    background: #45a6ea;
}

span{
    display: inline-block;
    background: #e0e0e0;
    color: #343434;
    height: 20px;
    font: 14px/20px arial;
    padding: 10px;
    cursor: pointer;
    min-width: 60px;
}

.controls{
    text-align: center;
}

jquery

$('.controls-button').on('click', function() {
    var slider = $('.slider-list'),
        sliderItems = slider.find('li');
    if ($(this).hasClass('next')) {
        moveNext();

    } else {
        movePrev();
    }



    function moveNext() {
        slider.stop().animate({
            left: '-=' + 900
        }, function() {
            var first = slider.children('li').first().clone();
            slider.children('li').first().remove();
            first.appendTo(slider).parent(slider).css({
                left: 0
            });
        });
    }

    function movePrev() {
        var last = slider.children('li').last();
        slider.children('li').last().remove();
        last.prependTo(slider).parent(slider).css({
            left: '-=' + 900
        }).stop().animate({
            left: 0
        });         
    }
});

So the problem is in next button. When you click on it very fast, slider will go out of the left. But when you stop doing it, slider append in center again. But I tried to do something like the prev button. Just try to click on prev button fast and you will see. So

function moveNext() {
    slider.stop().animate({
        left: '-=' + 900
    }, function() {
        slider.children('li').first().appendTo(slider).parent(slider).css({
            left: 0
        });
    });
}

function movePrev() {
    slider.children('li').last().prependTo(slider).parent(slider).css({
        left: '-=' + 900
    }).stop().animate({
        left: 0
    });         
}

Then as you can see I use clone method. I even tried to replace .stop() at movePrev function, but nevertheless. So I've already broken my head with this... Because at moveNext() stop work as I need. But in movePrev method .stop just return slider in center when you stop fast clicking.

Sorry here is fiddle http://jsfiddle.net/ujqgoyvL/

Large screen: http://jsfiddle.net/ujqgoyvL/embedded/result/

Answer 1

You can use slider.stop(true, true) to get the animation to jump to its end. http://jsfiddle.net/hrq3mmjy/4/