Geek Answers Handbook

JQuery custom slider previous next navigation jumping a few steps

I am involved in jQuery (and general programming), not with a plugin. I am trying to create my own image slider / loop, both for small code and for training.

My function '.show' through the li elements, adding the '.show' class, then after the delay removes the class and adds it to the next slide. This seems to be normal.

I’ve been trying for several days to add a navigation that will either move backward or further and stop the timer.

Be that as it may, if I immediately click on the navigation when the script starts, the navigation will work as expected, but as soon as the automatic function to show another slide, a few steps skipped and I have no idea why this is. Am I somehow drawing jQuery caching previous divs that had the class '.show' , maybe?

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

Here is the full 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'));
+4
source share
2 answers

The problem is that you call the checkForClicks function several times (in each iteration of the animation), and the event listener is added to the buttons several times, so each time you press, you move forward / backward not once, but once for each animation, a step that already been shown. Move checkForClicks outside the crossFade function and everything will be fine.

see 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'));
+2
source

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

If you declare var outside functions, it works fine.

0
source

More articles:


All Articles