Problème avec plusieurs diaporamas jQuery

Question

Fondamentalement, je configure une page avec plusieurs diaporamas en utilisant le plugin jQuery Cycle. Chaque diaporama ('. Slideshow') a sa propre navigation sous la forme d'un pager ('. Controls'). Cependant, chaque fois que je clique sur une icône de pager tous les diaporamas obn la page se fanent à la diapositive suivante. Comment puis-je empêcher cela de sorte que seul le diaporama en question ait la transisiton? Je pensais que mon code ci-dessous fonctionnerait mais ce n'est pas le cas, et comment puis-je montrer quelle icône de pager est sélectionnée?

Mon code est ci-dessous:

$(document).ready(function(){ 
$('.slideshow').each(function(){ 
var $this = $(this), $ss = $this.closest('.slideshow'); 
var pager = $ss.find('.controls'); 

$this.cycle({ 
fx:  'fade', 
speed: 'slow', 
timeout: 5000, 
pager: pager, 
pagerAnchorBuilder: function(idx, slide) { 
// return sel string for existing anchor 
return '.controls li:eq(' + (idx) + ') a'; 
} 
}); 

}); 
}); 

le HTML ressemble à ceci, mais avec des multiples sur la page:

<div class="slider"> 
<div class="slideshow"> 
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
    <a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
</div> 
    </div> 
    <!--/slider--> 
    <ul class="controls"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
    </ul> 

Answer 1

Cette partie semble étrange:

$('.slideshow').each(function(){ 
    var $this = $(this), $ss = $this.closest('.slideshow'); 
    var pager = $ss.find('.controls'); 

Essayez

$('.slideshow').each(function(){ 
var $this = $(this); 
var pager = $this.find('.controls'); 

Vous avez déjà une référence à l'élément .slideshow qui correspond à $ this, donc vous n'avez pas besoin de ss.

Si cela ne fonctionne pas, s'il vous plaît poster un extrait de votre code HTML, ou mieux encore, configurer un test sur http://jsfiddle.net et le lier ici.