TBS3 Multiple Modals with Numbered Slides

Stackoverflow question: http://stackoverflow.com/questions/24233498/jquery-bootstrap-3-carousel-slider-number-with-many-carousels/24243110#24243110

by jme11

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-xs-12" style="text-align: center;">
            <!-- Button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              Launch demo modal number 1
            </button>
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
              Launch demo modal number 2
            </button>
            <!-- Modal 1 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal Number 1</h4>
                  </div>
                  <div class="modal-body">
                    <!-- Carousel 1: data-interval is set to 1 second for demo purposes -->
                    <div id="carousel1" class="carousel slide" data-interval="1000">
                          <div class="numslide"></div>
                          <div class="carousel-inner">
                            <div class="item active">
                              <img src="http://fpoimg.com/558x300?text=Carousel%201%20Slide%201" alt="image 1">
                            </div>
                            <div class="item">
                              <img src="http://fpoimg.com/558x300?text=Carousel%201%20Slide%202" alt="image 2">
                            </div>
                            <div class="item">
                              <img...

CSS

.numslide {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    margin-left: -30%;
    padding-left: 0;
    list-style: none;
    text-align: center;	
    font-weight: bold;
}

JavaScript

//Set the text of the numslide classes when the page is loaded
$('.numslide').each(function(){
	var total = $(this).parents('.carousel').find('.carousel-inner .item').length;
	$(this).text('FOTO 1 DE '+total);
});

$('.carousel').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;
  	
  // index is 0-based so add 1 to it
  var txt = 'FOTO '+(currentIndex + 1)+' DE '+total;

  //MAKE SURE that each of your carousels has an element with the class numslide 
  //you don't need to make them unique because we're using this to target 
  $(this).find('.numslide').text(txt);
});

$('.modal').on('show.bs.modal', function () {
  $(this).find('.carousel').carousel('cycle');
});

$('.modal').on('hidden.bs.modal', function () {
  //the first line below is optional to reset the carousel so it starts 
  //from the first slide each time you click the modal button	
  //without it the carousel will start at which ever slide it was on
  //when the modal was closed
  $('.carousel').carousel(0);
  $(this).find('.carousel').carousel('pause');
});