jQuery Flexslider在幻灯片更改上添加和删除类 [英] Jquery Flexslider Add and Remove Class on Slide Change

问题描述

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

I'm using the jquery plugin Flexslider. I'm using the carousel as navigation for the slider. I'm trying to add a css class "active" to the first carousel element when the page loads, then remove the "active" class from the first element as the user chooses another element and add the "active" class to the next element the user chooses.

轮播可以很好地用作导航，但是当我按照以下建议在轮播中使用启动功能"添加活动类时，滑块停止移动，仅停留在一张幻灯片上.奇怪的是，它可以工作3-4次，然后再保持不动...

The carousel was working fine as a navigation, but when I used the "start function" in the carousel to add the active class as suggested below, the slider stops moving and just stays on one slide. It's strange it will work for 3-4 clicks and then won't keep moving...

想法?

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>

推荐答案

尝试将rel标签添加到#clientthumbs li项目和#clienttestimonials li项目中，并确保它们匹配.然后将启动功能替换为:

Try adding a rel tag to the #clientthumbs li items and the #clienttestimonials li items and make sure they match. Then replace your start function with:

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在幻灯片更改上添加和删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！