Slide number and total number of slides bx slider

Picture of Amitpal Singh
Amitpal Singh
June 24, 2022

Add Your Heading Text Here

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);
    },
    onSlideAfter: function (){
        var slide_count = slider.getSlideCount();
        var slide_curr = slider.getCurrentSlide();
        insertCount(slide_curr,slide_count);
    }
}); 

Updated Code:

$('#slide-counter').prepend('<strong class="current-index"></strong>/');
 
var slider = $('.carousel-client').bxSlider({
    auto: true,
    onSliderLoad: function (currentIndex){
        $('#slide-counter').text(currentIndex + 1);
    },
    onSlideBefore: function ($slideElement, oldIndex, newIndex){
        $('#slide-counter').text(newIndex + 1);
    }
});
 
$('#slide-counter').append(slider.getSlideCount()); 

Share this post:

How to Attribute?

Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
for Example: Website, Social Media, Blogs, ebooks , newsletter, etc.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
Copied!

Got a Question? Check out our FAQ Section.

Your action, our appreciation

It encourage us to give you more valuable content on website.