El bucle de diapositivas de jQuery falla
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.