Flexslider计算每个滑块上的幻灯片

Question

I am using Flexslider to create several sliders on a page. It's a Wordpress so the posts are created dynamically. I'm counting the slides with the callback function and this line:

$('.promo-image-counter').text(slider.count);

but of course it changes the text on all of the image counters (all of the sliders show the number of slides from the last slider), I need to count the slides on each slider individually.

My code so far:

$(".slider-promos").flexslider({
        animation: "slide",
        controlNav:false,
        touch:true,
        start: function(slider){
          $('body').removeClass('loading');
          $('.promo-image-counter').text(slider.count);
          $('.slides li img').show();
        }
 });

Answer 1

I have correctly count the slides on each slider with this code:

 $(".slider-promos").flexslider({
        animation: "slide",
        controlNav:false,
        touch:true,
        slideshow: false,
        start: function(slider){
          $('.slides li img').show();
          $('body').removeClass('loading');
          $(slider).find($(".promo-image-counter")).text(slider.count);
        }
    });

Needed to use

$(slider).find($(".promo-image-counter")).text(slider.count); 

instead of

$(this).find($('.promo-image-counter')).text(slider.count);

Answer 2

I need to count the slides on each slider individually.

You already do this, your failure is that you overriding the ".promo-image-counter" content with the count of the latest created slider instance. As you assume, you want this behaviour for each slider. You can reach this by selecting ".promo-image-counter"-element for each slider, something like this:

$('.slider1.promo-image-counter').text(slider.count);