jQuery custom slider previous next navigation jumping multiple steps

manpreet Best Answer 2 years ago

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">previousdiv><div class="next">nextdiv>');

    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
                                                

                                                                                                        
                                                    
                                                
                                                

                                                    

                                                        
                                                            0
                                                            views 

                                                            0
                                                                likes 
                                                            
                                                            

                                                            0
                                                            shares
                                                            


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp