带页面计数器的多个滑块 (bxSlider)

Question

我有一个页面，其中包含多个内容滑块（使用 jQuery bxSlider）和一个页面计数器。每个滑块都包含在一个可折叠的 div 中，使用 3 个按钮控制其打开和关闭。

这可以在这里显示 - jsFiddle

当打开一个新滑块时，该滑块的幻灯片总数未正确显示。使用（注释掉的）警报，我可以看到 show.getSlideCount 依次为三个滑块中的每一个返回，因此总是以 3 结束（三个滑块中最后一个滑块的数量）。当您单击下一个箭头查看第二张幻灯片时，就会正确显示每个滑块的总页数。

我确定这是非常明显的事情，但我似乎无法弄清楚为什么幻灯片计数对于下一个和上一个幻灯片功能正常工作，但不适用于滑块加载。这是我用于 bxSlider 的脚本

$('.bxslider').each(function(){
    var show = $(this);

    show.bxSlider({
    pager: false,
    infiniteLoop: false,
    hideControlOnEnd: true,
    slideMargin: 350,
    onSliderLoad: function (){
        show.goToSlide(0);
        var slide_count = show.getSlideCount();
        var slide_curr = show.getCurrentSlide();
        // alert (slide_count);
        insertCount(slide_curr,slide_count);
    },
    onSlideNext: function (){
        var slide_count = show.getSlideCount();
        var slide_curr = show.getCurrentSlide();
        insertCount(slide_curr,slide_count);
    },
    onSlidePrev: function (){
        var slide_count = show.getSlideCount();
        var slide_curr = show.getCurrentSlide();
        insertCount(slide_curr,slide_count);
    }                               
    });             
});

任何帮助或建议将不胜感激。

Answer 1

您可以使用内置计数器，而不是为 bxslider 构建自己的 n/x 计数器：

$('.bxslider').bxSlider({
    pager: true,
    pagerType: 'short'
});