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());
Nice solution, it worked for me. But for another example, i need to move multiple slides in 1 transition, and with this, your solution is not working. Can you help me with it?
Just replace the ‘slide_count’ in the ‘insertCount’ function with ‘slide_count/n’, where ‘n’ is the number of slides moved in one transition. Re-check the demo.
Great code – quick question though – I have added the ability to filter my bxslider and reload it with some of the LIs removed – I therefore need my counter to refresh – currently it gets confused between the original values for slide_curr and slide_count and the new ones – e.g. on initial load we have 30 slides, then after filtering it could be 5, the counter shows as 1/5 then just before the slide transition shows 1/30 – so looks like it has the original slide_count data still stored and being returned.
How can I reset the vars for slide_curr and slide_count?
Thanks
This appears to be because the first original slider is still in the code and auto advancing so messing up the new sliders slider counter… any way to kill the first slider? destroyslider does not seem to work…
I haven’t took this possibility into account…
DestroySlider() would’ve been my first thought too, but as the bxSlider documentation states, reloadSlider() might be a more appropriate choice when dealing with adding/removing slides on the fly.
Mihai, hello! Tell me, please. If I click on paginator – slide is changing, but number isn’t. How to change the current slider number, if I click on point in paginator?
Instead of ‘onSlideNext’ and ‘onSlidePrev’ callbacks, use ‘onSlideAfter’. Updated code in the article.
I don’t know why, but running this code, the console kept telling that “slider” was undefined when trying to execute the onSliderLoad: function. I had to redeclare the “slider”-variable to make it work. Like this:
onSliderLoad: function (){
slider = $('#slideshow').bxSlider();
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr,slide_count);
}
Any idea why? I’m a total newbie, as you might have guessed.
Make sure that “slider” is global (use the “var” keyword), and that all the code is executed when DOM is ready, use:
$(document).ready(function(){
// stuff
});
I wouldn’t recommend you to re-declare the slider when ‘onSliderLoad’ is called. That way you will end up having a new slider over the existing one.
Actually I tried using your jquery.bxslider.min.js file (version 4.0) and your code worked perfectly. The problem was that I had been trying it on version 4.1.2. Anyway, thanks for a great post!
$(‘#slideshow’).bxSlider({
pager: true,
pagerType: ‘short’
});
There is already an options in bxslider.
What if, you need to display, a full pager and a counter ?
Thanks for the solution.