Jquery Flexslider添加和刪除幻燈片上的類

Question

我正在使用jquery插件Flexslider。我使用旋轉木馬作爲滑塊的導航。我試圖在頁面加載時向第一個輪播元素添加一個css類「active」，然後當用戶選擇另一個元素並將「active」類添加到下一個元素時，從第一個元素中刪除「active」類用戶選擇。

傳送帶作爲導航工作正常，但是當我使用傳送帶中的「啓動功能」添加如下建議的活動類時，滑塊停止移動並停留在一張幻燈片上。這是奇怪的，它將工作3-4點擊，然後將不會繼續...

想法？

的Javascript

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     // The slider being synced must be initialized first 
     $('#clientthumbs').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: true, 
      directionNav: true, 
      slideshow: false, 
      itemWidth: 210, 
      itemMargin: 20, 
      asNavFor: '#clienttestimonials', 
      start : function(slider) { 
       $('#clientthumbs li').click(function(event) { 
       event.preventDefault();      
       $('#clientthumbs li').removeClass('active');      
       $(this).addClass('active'); 
       $('.flexslider').show(); 
       var slideTo = $(this).attr("rel"); //Grab rel value from link; 
       var slideToInt = parseInt(slideTo); 
       if (slider.currentSlide != slideToInt) { 
        $(this).addClass('active'); 
        slider.flexAnimate(slideToInt) //Move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
       } 


       }); 
       } 
     }); 

     $('#clienttestimonials').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      directionNav: false, 
      animationLoop: false, 
      slideshow: false, 
      sync: "#clientthumbs" 
     }); 
    }); 
</script> 

HTML

<div id="clientthumbs" class="flexslider"> 
    <ul class="slides"> 
    <li class="client1"></li> 
    <li class="client2"></li> 
    </ul> 
</div> 

<div id="clienttestimonials" class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <div class="clientpicsandquotes"> 
     </div>  
    </li> 
    <li> 
     <div class="clientpicsandquotes"> 
     </div> 
    </li> 
    </ul> 
</div> 

Answer 1

嘗試添加rel標籤的#clientthumbs裏項目和#clienttestimonials立項目，並確保它們匹配。然後將您的啓動功能替換爲：

start : function(slider) { 
    $('#clientthumbs li').click(function(event) { 
    event.preventDefault();      
    $('#clientthumbs li').removeClass('active');      
    $(this).addClass('active'); 
    $('.flexslider').show(); 
    var slideTo = $(this).attr("rel"); //Grab rel value from link; 
    var slideToInt = parseInt(slideTo); 
    if (slider.currentSlide != slideToInt) { 
     $(this).addClass('active'); 
     slider.flexAnimate(slideToInt) //Move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
    } 


} 
    });