How to Get total and Current Slide Number of Carousel

Question

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?

Answer 1

The only drawback with the below code will be that it doesn't show up till you go to next slide (triggers after each slide change).

JS/jQuery

$('#carousel-slide').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;

  var text = (currentIndex + 1) + " of " + total;
  $('#carousel-index').text(text);
});

HTML