JQuery slideshow loop error

Question

I am trying to implement snook.ca Simplest jQuery Slideshow, but when applied to child elements inside <ul> instead of a simple image stack. I successfully got a slideshow rotating through the necessary children, but I have run out of know-how when the sequence ends and returns to the beginning.

I want the sequence to return to the first child <p> and continue in an infinite loop.

You can see the slide show demo in JS Bin mode. Apologies for the verbosity of jQuery code; I am sure that it can be optimized.

For posterity, here is the HTML:

 <header> <nav> <ul> <li class="current"> <h3>...</h3> <p><img src="#"><span>...<a href="#">...</a></span></p> </li> <li> <h3>...</h3> <p><img src="#"><span>...<a href="#">...</a></span></p> </li> <li> <h3>...</h3> <p><img src="#"><span>...<a href="#">...</a></span></p> </li> <li> <h3>...</h3> <p><img src="#"><span>...<a href="#">...</a></span></p> </li> </ul> </nav> </header> 

And here is jQuery:

 $('header nav li').not('.current').children('p').hide(); setInterval(function(){ $('header nav li.current').children('p').hide() .parent('li').removeClass() .next('li').addClass('current') .children('p').show() .end(); },3000); 

Any help you could give would be greatly appreciated. Greetings.

Answer 1

Just break the chain after choosing the next li . If the next li does not exist, the length result set will be 0 . When this happens, return to the beginning. Then just finish the setup. Below is the version of your JSBin code that shows that it works :

 $('header nav li').not('.current').children('p').hide(); setInterval(function(){ var $next = $('header nav li.current').children('p').hide() .parent('li').removeClass() .next('li'); if(!$next.length) $next = $('header nav li:first'); $next.addClass('current') .children('p').show(); },3000);