counter - bxSlider 当前幻灯片数量显示/总幻灯片显示

Question

我想以 getCurrentSlide / getSlideCount 的格式构建带有分页的 bxslider。像这里的东西。

我的html代码：

<ul class="bxslider">
  <li>...</li>
  ...
</ul>
<div class="counter">1 / 10</div>

JS代码：

jQuery('.bxslider').bxSlider({
  pager: true,
  auto: false,
  controls: true
});

我假设，我需要使用 getCurrentSlide / getSlideCount，但我没有找到任何示例。

任何帮助，将不胜感激。谢谢！

Answer 1

bxSlider 有短寻呼机；）

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

Answer 2

你可以这样做；

slider = $('.bxslider').bxSlider({ 
    nextSelector: '.next-slide',
    nextText: '>',  
    prevSelector: '.prev-slide',
    prevText: '<',
    mode: 'fade',
    captions: false, 
    auto: true,
    autoControls: false,
    onSlideAfter: function(){    
        $('.slide-number').text((slider.getCurrentSlide()+1)+'/'+slider.getSlideCount());   
    }
});

Answer 3

将此代码附加到您的标题中

<script>
(function ($) {
     //bxslider
     function insertCount(slide_curr, slide_count) {
         $('#slide-counter').html('<strong>' + (slide_curr + 1) + '</strong>/' + slide_count);
     };

        var slider = $('.bxslider').bxSlider({
            auto: true,
            pager: false,
            captions:true,
            onSliderLoad: function () {
                var slide_count = slider.getSlideCount();
                var slide_curr = slider.getCurrentSlide();
                insertCount(slide_curr, slide_count);
            },
            onSlideNext: function () {
                var slide_count = slider.getSlideCount();
                var slide_curr = slider.getCurrentSlide();
                insertCount(slide_curr, slide_count);
            },
            onSlidePrev: function () {
                var slide_count = slider.getSlideCount();
                var slide_curr = slider.getCurrentSlide();
                insertCount(slide_curr, slide_count);
            }
        });
})(jQuery);
</script>

在关闭 ul() 之后添加。您已完成并且应该显示总索引和当前索引希望这会有所帮助。

解决方案说明和演示可以在这里找到