bxSlider current slide number display / total slides display - counter

Question

I would like to build bxslider with pagination in the format of getCurrentSlide / getSlideCount. Something like here.
my html code:
<ul class="bxslider">
<li>...</li>
...
</ul>
<div class="counter">1 / 10</div>
JS code:
jQuery('.bxslider').bxSlider({
pager: true,
auto: false,
controls: true
});
I assume, i need to use getCurrentSlide / getSlideCount, but i didn't find any examples.
Any help, would be appreciate. Thank you!

Answer 1

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

Answer 2

you can do it like this;
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

Append this code within your header
<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>
add just after the close ul().You are done and should display the total and current index hope this helps.
solution Instruction and Demo can be found here