Più giostre (carouFredSel) utilizzando jquery ciascuna, problema identificativo del collegamento

Question

Sto usando il seguente codice per creare più slidehows su 1 pagina.

Le presentazioni funzionano correttamente, ma non riesco a far funzionare i singoli pulsanti di ogni presentazione. Quando faccio clic su di essi, la pagina scorre verso l'alto. Ho pensato identificando in modo univoco ogni link che non dovrei avere problemi.

Qualche idea cosa c'è che non va?

 $("div.slideshow").each(function(){ 
      $(this).find('ul').carouFredSel 
      ({ 
      auto:true, 
      items: { width: 200, height: 200 }, 
      prev: { button: function() { return $(this).find('a.prev');}},    
      next: { button: function() { return $(this).find('a.next'); }},   
      }); 
    console.log($(this).find('a.prev')); //correct element returned, length 1 
    console.log($(this)); //correct element returned 
    }); 

Answer 1

Poiché la pagina scorre verso l'alto, il problema è con carouFredSel che inizializza i cercapersone. Molto probabilmente un problema con il tuo markup.

Ho anche avuto alcuni problemi con l'utilizzo dell'opzione responsive : true, lungo le linee appena descritte.

ho creato un jsFiddle per mostrare un esempio di lavoro di impaginazione con più caroselli in jQuery UI schede:

http://jsfiddle.net/EFC3X/

Answer 2

se il codice successivo

<div class="image_carousel"> 
    <div class="sec_elem"> 
     <div class="tem-bl"> 
      <img src="image.jpg" alt=""/> 
     </div> 
     <div class="tem-bl"> 
      <img src="image.jpg" alt=""/> 
     </div> 
     <div class="tem-bl"> 
      <img src="image.jpg" alt=""/> 
     </div> 
    </div> 

    <a class="prev" href="#"></a> 
    <a class="next" href="#"></a> 
</div> 

jquery

$(".sec_elem").carouFredSel({ 
    circular: true, 
    infinite: false, 
    width:'100%', 
    auto : true, 
    scroll : { 
     items : 1, 
     pauseOnHover : true, 
     duration : 1000 
    }, 
    prev : { 
     button : function(){ 
      return $(this).parents('.image_carousel').find('.prev'); 
     }, 
     key  : "left" 
    }, 
    next : { 
     button : function(){ 
      return $(this).parents('.image_carousel').find('.next'); 
     }, 
     key  : "right" 
    } 
});