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

경우