Question

I can’t seem to grasp what I have to do here. I’m trying my hand at creating a simple image slideshow, and I’m trying to figure out how to make it work. It’s not running through my for loop, and I can’t see why. Here’s a fiddle of my code: http://jsfiddle.net/xnEGt/.

Answer 1

Here: http://jsfiddle.net/xnEGt/6/

What was wrong:

1. Images had first to be hidden via CSS, only first image visible
2. By using a for loop all the images will be shown only once. Note that the .delay() doesn’t affect the loop so all the iterations will be made at once
3. You can solve this by using a recursive implementation using setTimeout

4. .get(0) and .get(1) selectors were also wrong, use nth-child(i) instead.

   var slideCount = $('.slider div.slide').length;
   nextPic(0);
   
   function nextPic(i){
   
       var next = (i+1)%(slideCount+1);
   
       $('.slider div:nth-child('+i+')').fadeOut(100);
       $('.slider div:nth-child('+next+')').fadeIn(100);  
   
       setTimeout(function(){nextPic(next);},1000);
   }
   

   Or a more compact implementation using .get() selectors: http://jsfiddle.net/xnEGt/7/