bxSlider当前幻灯片编号显示/总幻灯片显示

Question

我想用getCurrentSlide/getSlideCount格式构建带有分页的bxslider。类似于here。

我的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

你可以这样做;

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 2

追加你的头

<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（）后，你完成了，应该显示总的和当前索引希望这会有所帮助。

溶液Instruction and Demo can be found here

Answer 3

bxSlider具有短寻呼机）

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