複数のカルーセル（carouFredSel）、それぞれjquery、リンク識別子の問題を使用

Question

私は1ページに複数のスライドショーを作成するために次のコードを使用しています。

スライドショーは正常に機能しますが、各スライドショーの個々のボタンを操作することはできません。私がそれらをクリックすると、ページは一番上にスクロールします。私は各リンクを一意に識別することで問題はないはずだと思った。

何か問題がありますか？

 $("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

ページが上にスクロールするので、問題はcarouFredSelがページャを初期化することにあります。あなたのマークアップに問題がある可能性が非常に高い。

私はまた、responsive : trueオプションを、今説明した行に沿って使用する際にいくつかの問題を抱えています。

私はjQueryのタブのUIで複数のカルーセルで改ページの実施例を示すために、jsFiddleを作成しました：

http://jsfiddle.net/EFC3X/

Answer 2

コード場合は、次の

<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" 
    } 
});