After some trial and error, I managed to figure out how to display the slide/total count. However, there is a problem when clicking on next as it returns to the first slide but still shows 4/4 instead of 1/4.
JSFiddle: https://jsfiddle.net/zorw7yLe/
HTML:
<div class="num"></div>
<a class="next" href="#carouselExampleIndicators" role="button" data-slide="next"> -->>></a>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<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 class="carousel-caption">
<h5>Title of the first image</h5>
<p>Some description of the first image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
<div class="carousel-caption">
<h5>Title of the second image</h5>
<p>Some description for the second image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
<div class="carousel-caption">
<h5>Title of the third image</h5>
<p>Some description for the third image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Fourth slide">
<div class="carousel-caption">
<h5>Title of the fourth image</h5>
<p>Some description for the fourth image</p>
</div>
</div>
</div>
</div>
JS:
var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;
var down_index;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$(".next").click(function(){
currentIndex_active = $('.carousel-item.active').index() + 2;
if (totalItems >= currentIndex_active)
{
down_index= $('.carousel-item.active').index() + 2;
$('.num').html(''+currentIndex_active+'/'+totalItems+'');
}
});