向li添加flex-active类，然后在滑块前进时将其删除

Question

I found a similar question Adding flex-active class to the li instead of a/img

but this solution is not removing the flex-active class from the active li siblings.

I'll post the code as well for referense

$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
controlNav: "thumbnails",
start: function(){
 $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
},
after: function(){
$('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
}
});

any help would be great!

Answer 1

I found this solution and its worked for me

start: function() {
         //-- Add flexslider active class to li of nav control instead of just on the image
         if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) {
             // initial check and addition
             $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                 if ($(this).children('img').hasClass('flex-active')) {
                     $(this).children('img').removeClass('flex-active');
                     $(this).addClass('flex-active');
                 } else {
                     $(this).removeClass('flex-active');
                 }
             });
             // bind into flexslider callback and run dynamically
             $('.testimonial-section .flexslider').bind('start', function(event, slider) {
                 $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                     if ($(this).children('img').hasClass('flex-active')) {
                         $(this).children('img').removeClass('flex-active');
                         $(this).addClass('flex-active');
                     } else {
                         $(this).removeClass('flex-active');
                     }
                 });
             });
         }
     },
     after: function() {
         //-- Add flexslider active class to li of nav control instead of just on the image
         if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) {
             // initial check and addition
             $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                 if ($(this).children('img').hasClass('flex-active')) {
                     $(this).children('img').removeClass('flex-active');
                     $(this).addClass('flex-active');
                 } else {
                     $(this).removeClass('flex-active');
                 }
             });
             // bind into flexslider callback and run dynamically
             $('.testimonial-section .flexslider').bind('after', function(event, slider) {
                 $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                     if ($(this).children('img').hasClass('flex-active')) {
                         $(this).children('img').removeClass('flex-active');
                         $(this).addClass('flex-active');
                     } else {
                         $(this).removeClass('flex-active');
                     }
                 });
             });
         }
     }