Jquery Flexslider 在幻灯片更改上添加和删除类

Question

我正在使用 jquery 插件Flexslider。我正在使用轮播作为滑块的导航。我试图在页面加载时向第一个轮播元素添加一个 css 类“活动”，然后在用户选择另一个元素时从第一个元素中删除“活动”类并将“活动”类添加到下一个元素用户选择。

轮播作为导航可以正常工作，但是当我使用轮播中的“开始功能”来添加活动类时，如下所示，滑块停止移动并仅停留在一张幻灯片上。奇怪的是，它可以点击 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

尝试为#clientthumbs li 项目和#clienttestimonials li 项目添加一个rel 标签，并确保它们匹配。然后将您的启动功能替换为：

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


}
    });