autoStop during transition

[saturday1]

Hello again! :)

I have found out another bug/problem. If you press the stop link that calls "autoStop();" during the transition between slides, it will not run correctly, "startAuto();" will still be true. Is there anyway to see if a transition is going on? If so I guess it is possible to use a if statement and a timeout function to fix it.

Something like:

jQuery('.stop-link').click(function(){
    // Check if transition is running
    if (transition) {
        // Transition running, set timeout before stop
        setTimeout(function(){
            thumbs.stopAuto();
            console.log('is paused');
        }, 900);
    } else {
        // Transition not running, stop directly
        thumbs.stopAuto();
    }
});

?

[saturday1]

I figured out and wrote a solution, when I found out the class "transition" which is applied when the transition takes action on li element. Maybe not bug free and maybe you can get this into one function or smarter javascript. But anyways, as I can see this do the job for a pause/play button during the transition:

//Play/pause button
jQuery('.pause-slider').click(function(e){
    e.preventDefault();

    jQuery(this).hide();
    jQuery(this).siblings('.play-slider').css('display', 'block');
    jQuery(this).parent('.controls').addClass('is-paused');
    // Check if transition is running
    if (jQuery('.slider-img-wrapper li').hasClass('transition')) {
        // Transition running, set timeout before stop
        setTimeout(function(){
            thumbs.stopAuto();
            console.log('is paused after transition');
        }, transitionTime + 10);
    } else {
        // Transition not running, stop directly
        thumbs.stopAuto();
        jQuery(this).siblings('.play-slider').css('display', 'block');
        console.log('is paused');
    }
});

jQuery('.play-slider').click(function (e) {
    e.preventDefault();

    jQuery(this).hide();
    jQuery(this).siblings('.pause-slider').css('display', 'block');
    jQuery(this).parent('.controls').removeClass('is-paused');

    if (jQuery('.slider-img-wrapper li').hasClass('transition')) {
        // Transition running, set timeout before start
        setTimeout(function(){
            thumbs.startAuto();
            console.log('playing after transition');
        }, transitionTime + 10);
    } else {
        // Transition not running, start directly
        thumbs.startAuto();
        jQuery(this).siblings('.pause-slider').css('display', 'block');
        console.log('playing');
    }
});

You can see this solution at: http://cdn.axiell.com/dev/slippry - Check the console when playing/pausing. Also try in the transition and you see different messages.