jQuery slideshow loop fail

Question

Hi,

I've been trying to implement snook.ca's Simplest jQuery Slideshow, but when applied to child elements inside a <ul> instead of a straightforward stack of images. I've successfully got the slideshow rotating through the necessary child elements, but I've run out of know-how when ending the sequence and returning to the beginning.

I'd like the sequence to return to the first <p> child element and continue in an endless loop.

You can see a demo of the slideshow in operation on JS Bin. Apologies for the verbosity of the jQuery code; I'm sure it could 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 the 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 much appreciated. Cheers.

Answer 1

Just break your chaining after selecting the next li. If there is no next li, the length of the result set will be 0. When that happens, loop back to the beginning. Then, just finish your setup. Here is a revision on your JSBin code that shows it working:

$('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);