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?

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

EXAMPLE

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

user3221264

Bootstrap 3.2+:

carouselData.getItemIndex(carouselData.$element.find('.item.active'))

var totalItemsPop = $('#Mycarousel .item').length; 
$('#Mycarousel').on('slide.bs.carousel', function() {
       setTimeout(function(){ 
            currentIndexPop = $('#Mycarousel div.active').index() + 1;
            $('.num').html('' + currentIndexPop + '/' + totalItemsPop + '');
         }, 1000);
   });

after slide event div will be active and can not get active index, so keep you code inside set time out function

You can use jquery index() function to get the current index of active element inside list of item. So the code is look like this:

var currentItem = $("#carousel-1 .item.active" );
var currentIndex = $('#carousel-1 .item').index(currentItem) + 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

<div id="carousel-index">
  <!-- Number will be added through JS over here -->
</div>

Bootstrap 4 and js

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

            var down_index;
            $('.num').html(''+currentIndex+'/'+totalItems+'');

                $(".next").click(function(){
                currentIndex_active = $('div.item.active').index() + 2;
                if (totalItems >= currentIndex_active)
                {
                    down_index= $('div.item.active').index() + 2;
                    $('.num').html(''+currentIndex_active+'/'+totalItems+'');
                }
            });

                $(".prev").click(function(){
                    down_index=down_index-1;
                if (down_index >= 1 )
                {
                    $('.num').html(''+down_index+'/'+totalItems+'');
                }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


 <div class="num"></div>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-wrap="false" data-interval="false">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item item active">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

来源：https://stackoverflow.com/questions/17823571/how-to-get-total-and-current-slide-number-of-carousel

标签

jquery

twitter-bootstrap

slider

carousel