Update! Scroll to updated code.
Add a slides counter ( current/total ) to bxSlider carousels, using bxSlider callbacks and methods.
You just have to add an html element ( ex. ‘<div id=”slide-counter”></div>’ ), where to show the numbers, and the code below will do the rest.
function insertCount(slide_curr,slide_count){ $('#slide-counter').html('<strong>'+ (slide_curr + 1) +'</strong>/'+ slide_count); }; var slider = $('#slideshow').bxSlider({ auto: true, pager: false, 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); } });
Because ‘onSlideNext’ and ‘onSlidePrev’ callbacks are executed only before each “Next” or “Prev” slide transition, if you want to use a ‘pager’ for navigating through slides, you’ll need to use the ‘onSlideAfter’ callback.
function insertCount(slide_curr,slide_count){ $('#slide-counter').html('<strong>'+ (slide_curr + 1) +'</strong>/'+ slide_count); }; var slider = $('#slideshow').bxSlider({ auto: true, pager: false, onSliderLoad: function (){ var slide_count = slider.getSlideCount(); var slide_curr = slider.getCurrentSlide(); insertCount(slide_curr,slide_count); }, onSlideAfter: function (){ var slide_count = slider.getSlideCount(); var slide_curr = slider.getCurrentSlide(); insertCount(slide_curr,slide_count); } });
Updated code, and demo with the latest BxSlider version.
The old code with the 4.1.2 bxSlider version, throws an error if the “getSlideCount()” public method is called in a callback fuction.
$('#slide-counter').prepend('<strong class="current-index"></strong>/'); var slider = $('#slideshow').bxSlider({ auto: true, onSliderLoad: function (currentIndex){ $('#slide-counter .current-index').text(currentIndex + 1); }, onSlideBefore: function ($slideElement, oldIndex, newIndex){ $('#slide-counter .current-index').text(newIndex + 1); } }); $('#slide-counter').append(slider.getSlideCount());