Carousel con contador de imagenes

by Jorgelig

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <div id="RealtyCarousel" class="carousel detailBox">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://s3.amazonaws.com/nocnok-img/130319123644-6018c5fdb1e54f4597adb84b4f21b279l.jpg" alt=""/>
            </div>
            <div class="item">
                <img src="http://s3.amazonaws.com/nocnok-img/130409130224-3d47df964659424d96f0d5c73bb3fcc5l.jpg" alt=""/>
            </div>
            <div class="item">
                <img src="http://s3.amazonaws.com/nocnok-img/130409125956-ee7b4f2bcdd9423999c327164610a318l.jpg" alt=""/>
            </div>
            <div class="item">
                <img src="http://s3.amazonaws.com/nocnok-img/130409125956-ee7b4f2bcdd9423999c327164610a318l.jpg" alt=""/>
            </div>
            <div class="item">
                <img src="http://s3.amazonaws.com/nocnok-img/130317200029-be3558e426d84157a294c156d0637fbbl.jpg" alt=""/>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#RealtyCarousel" data-slide="prev"><span class="arrow">&lsaquo;</span> <span class="text">Anterior</span></a>
        <a class="carousel-control right" href="#RealtyCarousel" data-slide="next"><span class="text">Siguiente</span><span class="arrow">&rsaquo;</span></a>
        
        <div class="slideCounter-container">
            <span class="current-slide">1</span> / <span class="total-slide">2</span>
        </div>
</div>

CSS

#RealtyCarousel .carousel-control {
    background-color: transparent;
    border: medium none;
    color: #333333;
    font-size: 1em;
    height: auto;
    margin: 0;
    top: 90%;
    width: auto;
    opacity: 1;
}
#RealtyCarousel .carousel-control:focus{
    opacity: 1;
}
#RealtyCarousel .slideCounter-container{color: #A3A3A3;font-size: .9em;}
#RealtyCarousel .carousel-control{line-height: 20px;}
#RealtyCarousel .carousel-control.left{}
#RealtyCarousel .carousel-control.right{right: 40px;}
#RealtyCarousel .carousel-control .arrow{
   background: none repeat scroll 0 0 #222222;
    border: 3px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    color: #FFFFFF;
    font-size: 1em;
    font-weight: 100;
    height: 20px;
    line-height: 1em;
    opacity: 0.5;
    position: absolute;
    width: 20px;
}
#RealtyCarousel .carousel-control .text{
    color: #A3A3A3;
    font-size: .85em;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle;
    opacity: 1;
}

#RealtyCarousel .left .text{margin-left: 26px;}
#RealtyCarousel .right .text{}

JavaScript

$(".carousel").each(function(index, elem){
    var totalSlide = $(this).find(".total-slide");
    var total = $(this).find(".item").length;
    console.log($(this).find(".item").length);
    totalSlide.text(total);
});

$(".carousel").on('slid', function(e){  
    e.preventDefault();
    var index = $(".active", e.target).index() + 1;
    var targetId = e.target.id;
    $(this).find(".current-slide").text(index);
});