2014-04-22 1 views
0

왜 내 코드가 작동하지 않습니까? 나는 모든 지시를 따랐다. 먼저 다른 슬라이더를 제어 할 슬라이더를 시작하십시오. asNavFor : 및 sync :를 추가하십시오. HTML에는 오류가 없습니다. 두 슬라이더 모두 독자적으로 잘 작동하지만 몇 가지 이유로 동기화되지 않습니다 ... 실망합니다!jquery flexsliders를 동기화하는 방법은 무엇입니까?

$(".flexslider2").flexslider({ 
    slideshow: false, 
    animation: "slide", 
    direction: "vertical", 
    reverse: true, 
    controlNav: false, 
    animationLoop: false, 
    directionNav: false, 
    asNavFor: ".flexslider" 
}); 
$(".flexslider").flexslider({ 
    slideshow: false, 
    animation: "slide", 
    direction: "vertical", 
    directionNav: false, 
    animationLoop: false, 
    controlNav: false, 
    sync: ".flexslider2" 
}); 

HTML

<script type="text/javascript" src="js/jquery.flexslider.js"></script> 
<div class="container"> 
    <div class="flexslider2"> 
     <ul class="slides"> 
      <li><div class="slide slide4"></div></li> 
      <li><div class="slide slide5"></div></li> 
      <li><div class="slide slide6"></div></li> 
     </ul> 
    </div> 
    <div class="flexslider"> 
     <ul class="slides"> 
      <li><div class="slide slide1"></div></li> 
      <li><div class="slide slide2"></div></li> 
      <li><div class="slide slide3"></div></li> 
     </ul> 
    </div> 
</div> 

답변

0

하지 않도록 정확히 염두에두고 있지만 내비게이션으로 작동 슬라이더가 하나 개 이상의 슬라이드를 보여줍니다 확인해야하므로 사용자가 클릭 할 수있는 두 번째 슬라이드의 슬라이드를 변경하십시오.

itemWidth: 100 

을하거나 directionNav을 해제하지 않습니다

그래서 etiher에 "itemWidth"를 추가합니다.

데모 :

http://jsfiddle.net/JC46C/