Question

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

这可以在这里工作 - jsFiddle

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

我确定这是非常明显的事情，但我似乎无法解决为什么slidecount可以正常用于下一个和上一个幻灯片功能，但不能用于滑块加载。这是我用于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'
});

带有页面计数器的多个滑块（bxSlider）

1 个答案: