Mona Coder Mona Coder - 4 months ago 207
jQuery Question

How to Get total and Current Slide Number of Carousel

Can you please let me know how I can get the total and current number of the carousel slides in bootstrap like the image below?

Image showing current page and total number of pages

I have an standard Bootstrap carousel and a

<div>
with the
.num
class to display the total and current number and I used this code to retrieve the numbers but it didn't go through

$('.num').html(){
$('#myCarousel').carousel({number})
}


Thanks

Update:

Please find a sample at this jsfiddle LINK

Answer

Each slide has a .item class to it, you can get the total number of slides like this

var totalItems = $('.item').length;

Active slide has a class named as active, you can get the index of active slide like this

var currentIndex = $('div.active').index() + 1;

You can update these values by binding the bootstrap carousel slid event like this

$('#myCarousel').bind('slid', function() {
    currentIndex = $('div.active').index() + 1;
   $('.num').html(''+currentIndex+'/'+totalItems+'');
});

EXAMPLE