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?
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
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+'');
});