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

Question

我正在使用 Flexslider 在页面上创建多个滑块。这是一个 Wordpress，所以帖子是动态创建的。我正在用回调函数和这一行计算幻灯片：

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

但当然它会更改所有图像计数器上的文本（所有滑块都显示最后一个滑块的幻灯片数量），我需要单独计算每个滑块上的幻灯片。

到目前为止我的代码：

$(".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

我已经用这段代码正确地计算了每个滑块上的幻灯片：

 $(".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);
        }
    });

需要使用

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

而不是

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

Answer 2

我需要单独计算每个滑块上的幻灯片。

您已经这样做了，您的失败在于您使用最新创建的滑块实例的计数覆盖了“.promo-image-counter”内容。正如您所假设的，您希望每个滑块都有这种行为。您可以通过为每个滑块选择“.promo-image-counter”-element 来达到此目的，如下所示：

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