Question

我正在使用jquery插件Flexslider。我正在使用旋转木马作为滑块的导航。我正在尝试在页面加载时将css类“active”添加到第一个carousel元素，然后在用户选择另一个元素并将“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 li项目和#clienttestimonials li项目中，并确保它们匹配。然后用：

替换你的开始函数

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


}
    });

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

1 个答案: