taylor018 taylor018 - 11 months ago 94
jQuery Question

jquery slideshow delays before looping back through?

I'm trying to create a simple image slideshow but it's not exactly working the way I want. When it cycles through all the images, I want it to immediately loop back to the first picture. But, there seems to be a delay before it loops back which isn't what i want. How can i fix this?

here's my codepen
https://codepen.io/tayanderson/pen/vWQXbd

$(document).ready(function(){
var seconds = 2000;
var step = 0;
var limit = 2;

$("#Background").addClass("image-"+step).fadeIn(500);

setInterval(function(){
$("#Background").fadeOut(500,function(){
$(this).removeClass("image-"+step);
step = (step > limit) ? 0 : step + 1;
$("#Background").addClass("image-"+step).fadeIn(500);
});
},seconds);
});

Answer Source

Change limit to zero: limit = 0;

Even with 2 images as in your codepen example, you are starting your step (count) at 0, and also only resetting the slideshow when step > limit, which requires 4 "rounds".

I've made an example of this behaviour here (see the counter): https://codepen.io/anon/pen/YERNrP

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download