2013-03-01 19 views
5

私は1ページに複数のスライドショーを作成するために次のコードを使用しています。複数のカルーセル(carouFredSel)、それぞれjquery、リンク識別子の問題を使用

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

何か問題がありますか?

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

答えて

3

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

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

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

http://jsfiddle.net/EFC3X/

+0

私は文脈を覚えていませんが、あなたのコードは2つのカルーセルを明確に示しています。同じページとタブを削除しても動作します。私は、これに対する答えを探している人々があなたの解決策を見るためにうまくいくと思います。ありがとう、 – rix

5

コード場合は、次の

<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" 
    } 
}); 
関連する問題