falha no loop da apresentação de slides do jQuery
Eu tenho tentado implementar a apresentação de slides jQuery mais simples do snook.ca, mas quando aplicada a elementos filho dentro de um<ul>
em vez de uma pilha simples de imagens. Consegui fazer com que a apresentação de slides alternasse entre os elementos filhos necessários, mas fiquei sem conhecimento ao finalizar a sequência e retornar ao início.
Gostaria que a sequência retornasse à primeira<p>
elemento filho e continue em um loop sem fim.
Você pode ver uma demonstração da apresentação de slides em operação noJS Bin. Desculpas pela verbosidade do código jQuery; Tenho certeza de que poderia ser otimizado.
Para a posteridade, aqui está o 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>
E aqui está o 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);
Qualquer ajuda que você poderia dar seria muito apreciada. Felicidades.