Using JavaScript and Bootstrap controls, you can easily track the number of slides in a standard Bootstrap carousel. By implementing a simple button press counter that increments or decrements, you can keep track of the total and current slide numbers using the .num class. However, the code below did not produce the desired outcome:
var totalItems = $('.item').length;
var currentIndex = $('div.item.active').index() + 1;
var dynamicIndex;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$(".next").click(function(){
dynamicIndex = $('div.item.active').index() + 2;
if (totalItems >= dynamicIndex)
{
dynamicIndex = $('div.item.active').index() + 2;
$('.num').html(''+dynamicIndex+'/'+totalItems+'');
}
});
$(".prev").click(function(){
dynamicIndex = dynamicIndex - 1;
if (dynamicIndex >= 1 )
{
$('.num').html(''+dynamicIndex+'/'+totalItems+'');
}
});