bxSlider current slide number display / total slides display

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!

Solution 1

bxSlider has short pager ;)

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

Solution 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());   
    }
});

Solution 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

Comments

[Tusko Trush]

U can move var slide_count = slider.getSlideCount(); var slide_curr = slider.getCurrentSlide(); inside insertCount function