He estado tratando de implementar la presentación de diapositivas más simple de snook.ca, pero cuando se aplica a elementos secundarios dentro de un<ul> en lugar de una simple pila de imágenes. He logrado que la presentación de diapositivas gire a través de los elementos secundarios necesarios, pero me he quedado sin conocimientos al finalizar la secuencia y volver al principio.

Me gustaría que la secuencia volviera a la primera.<p> elemento secundario y continuar en un bucle sin fin.

Puede ver una demostración de la presentación de diapositivas en funcionamiento enJS Bin. Disculpas por la verbosidad del código jQuery; Estoy seguro de que podría optimizarse.

Para la posteridad aquí está el 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>

Y aquí está el 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);

Cualquier ayuda que pueda dar sería muy apreciada. Salud.