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' });