Bootstrap 3 - carousel with page numbers - twitter-bootstrap-3

Question

I am wondering how to show page numbers with Bootstrap Carousel. Bootstrap has carousel indicators (dot points):
Is it possible to change the indicator to something like "Page 1/3"?
I have tried adding the number to bootstrap caption and moving it to the left side:
However, whenever I clicked next, the number didn't stay at its place. Any ideas how to make this better?
Thanks!

Answer 1

Found a working solution:
var total = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('#slidetext').html(currentIndex + '/' + total);
// This triggers after each slide change
$('.carousel').on('slid.bs.carousel', function () {
currentIndex = $('div.active').index() + 1;
// Now display this wherever you want
var text = currentIndex + '/' + total;
$('#slidetext').html(text);
});
http://jsfiddle.net/Lf9krnsm/

Answer 2

carousel.on('slide.bs.carousel', function (event) {
var active = $(event.target).find('.carousel-inner > .item.active');
var from = active.index();
var next = $(event.relatedTarget);
var to = next.index();
var direction = event.direction;
});

Answer 3

HTML5:
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#client" data-slide-to="0" class="active">1</li>
<li data-target="#client" data-slide-to="1">2</li>
<li data-target="#client" data-slide-to="2">3</li>
</ol>
SASS:
.carousel-indicators{
bottom: -15px;
left: 80%;
li{
width: 17px;
height: 17px;
margin: 3px;
text-indent: 0;
background-color: $wcolor;
border: 1px solid $bcolor;
border-radius: 0;
line-height: 13px;
}
.active {
width: 17px;
height: 17px;
background-color: #ddd;
}
}