Carsoul Modal - Same Slide

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img data-id='1' src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" />
            <div class='carousel-caption'>
                 <h4>Caption</h4>
                <p>Message for Item number One</p>
            </div>
        </div>
        <div class="item">
            <img data-id='2' src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" />
            <div class='carousel-caption hide'>
                 <h4>Caption</h4>
                <p>Message for Item number Two</p>
            </div>
        </div>
        <div class="item">
            <img data-id='3' src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" />
            <div class='carousel-caption hide'>
                 <h4>Caption</h4>
                <p>Message for Item number Three</p>
            </div>
        </div> 
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
 .container {
    margin-top: 10px;
}

JavaScript

$('#myCarousel').on('slide',function(){
    $('#myCarousel .active .carousel-caption').fadeOut();
});

$('#myCarousel').on('slid',function(){
    $('#myCarousel .active .carousel-caption').fadeIn();
});