How to Get total and Current Slide Number of Carousel
Update of @Khawer Zeshan's code
For Bootstrap 3.0+ use slid.bs.carousel
instead of slid
and on
instead of bind
. So the update code will be like that
var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('#myCarousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
});
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