jQuery custom slider previous next navigation jumping multiple steps

Question

I am a jQuery (and general programming) learner and rather than using a plug-in I am trying to build my own Image slider/cycle, both to keep the code small, and to aid in learning.

My function cycles through the li items adding a '.show' class, then after a delay removes the class and adds to the next slide. This seems to work fine.

I have been struggling for a few days to add navigation which will either move previous or next and stop the timer.

As it stands, if I click the navigation immediately as the script starts the navigation will work as expected, but once the automatic function to show another slide has started the navigation will jump multiple steps and I have no idea why this is. I imaging somehow jQuery is caching the previous divs which have had a '.show' class perhaps?

I have simplified my code and presentation to illustrate this working up in a CodePen: codepen.io/MattyBalaam/pen/vuhyJ

Here is the complete script:

function gallery(galleryContainer) {

    $.fn.nextOrFirst = function(selector) {
      var next = this.next(selector);
      return (next.length) ? next : this.prevAll(selector).last();  
    };


    $.fn.prevOrLast = function(selector) {
        var prev = this.prev(selector);
        return (prev.length) ? prev : this.nextAll(selector).last();

    };

    galleryContainer.parent().prepend('<div class="previous">previous</div><div class="next">next</div>');

    var crossFade = function (){

        var slideTimeout;

        function slideWait() {
            galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
            slideTimeout = setTimeout(crossFade, 800);
         }   

    function checkForClicks() {

        $('div.previous').on('click', function(){
            galleryContainer.find('.show').removeClass('show').prevOrLast().addClass('show');
            window.clearTimeout(slideTimeout);
        });

        $('div.next').on('click', function(){
            galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
            window.clearTimeout(slideTimeout);
         });
    }

    checkForClicks();
    slideWait();

};

galleryContainer.children(':first-child').addClass('show');
setTimeout(crossFade, 800);
}

gallery($('ul'));

Answer 1

The problem is, that you are calling function checkForClicks multiple times (in each animation iteration) and the event listener is added to buttons multiple times, so on each click you move forwards/backwards not just once, but once for each animation step, that was already displayed. Move the checkForClicks outside the crossFade function and it will be ok.

see the code: http://codepen.io/anon/pen/ptkea

working code:

function gallery(galleryContainer) {

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

$.fn.prevOrLast = function(selector) {
    var prev = this.prev(selector);
    return (prev.length) ? prev : this.nextAll(selector).last();
};

    galleryContainer.parent().prepend('<div class="previous">previous</div><div class="next">next</div>');

    var slideTimeout;
    var crossFade = function (){
        function slideWait() {
              galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
              slideTimeout = setTimeout(crossFade, 800);
        }   
        slideWait();
    };

    galleryContainer.children(':first-child').addClass('show');
    setTimeout(crossFade, 800);

    function initButtonEvents() {

            $('div.previous').on('click', function(){
                galleryContainer.find('.show').removeClass('show').prevOrLast().addClass('show');
            window.clearTimeout(slideTimeout);
            });

            $('div.next').on('click', function(){
                galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
            window.clearTimeout(slideTimeout);

            });
    }
    initButtonEvents();

}

gallery($('ul'));

Answer 2

see my script: http://codepen.io/anon/pen/asvGc

If you declare the var's outside the functions it works fine.