BxSlider slides counter

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

Here you can find a demo.


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

Updated demo

Comments

  1. written by: Suthar PRIYANK on March 14, 2014 at 4:38 pm - Reply

    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?

    • written by: Mihai on March 16, 2014 at 7:08 pm - Reply

      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.

  2. written by: Jon Wallace on April 16, 2014 at 12:55 pm - Reply

    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

    • written by: Jon Wallace on April 16, 2014 at 1:52 pm - Reply

      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…

      • written by: Mihai on April 16, 2014 at 5:59 pm - Reply

        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.

  3. written by: Vitaliy on April 17, 2014 at 1:32 pm - Reply

    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?

    • written by: Mihai on April 22, 2014 at 10:01 pm - Reply

      Instead of ‘onSlideNext’ and ‘onSlidePrev’ callbacks, use ‘onSlideAfter’. Updated code in the article.

  4. written by: Kakafoni on October 3, 2014 at 2:29 pm - Reply

    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.

    • written by: Mihai on October 5, 2014 at 12:13 am - Reply

      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.

      • written by: Kakafoni on October 6, 2014 at 11:14 pm - Reply

        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!

  5. written by: Jay on November 17, 2014 at 1:49 pm - Reply

    $(‘#slideshow’).bxSlider({
    pager: true,
    pagerType: ‘short’
    });

    There is already an options in bxslider.

    • written by: Mihai on February 28, 2015 at 9:00 pm - Reply

      What if, you need to display, a full pager and a counter ?

  6. written by: Gozde on April 14, 2015 at 1:21 pm - Reply

    Thanks for the solution.

Leave a Reply to Suthar PRIYANK Cancel reply

Your email address will not be published. Required fields are marked *

+ 48 = 53

This site uses Akismet to reduce spam. Learn how your comment data is processed.