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.

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...

Ideas?

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>

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.

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...

Ideas?

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>

• javascript
• jquery
• slider
• flexslider

• Are you showing one image at a time in your slider? In that case, there is no need to add active class as there is already one provided in the FlexSlider itself.. Is that the case or is it different? – mabus44 Commented Jan 16, 2013 at 19:09
• No I'm trying to change the class of the one of the carousel images which shows multiple images at once. The carousel is acting as navigation to the slider – DaveG Commented Jan 16, 2013 at 19:11

1 Answer 1

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


}
    });