bootstrap carousel passing data

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<div id="ismdb" class="carousel slide" data-interval="false" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <h3>First Panel</h3> <br/>
            <a href="#ismdb" data-custom-slide-to="1" class="btn btn-primary">Click 1</a>
            <a href="#ismdb" data-custom-slide-to="1" class="btn btn-primary">Click 2</a>
        </div>
        <div class="item">
            <h3>Second Panel</h3>
            <h4 class="secondPanelFrom"></h4>
            <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
        </div>
    </div>
</div>

CSS

.carousel, .item{
    width:100%;
    height:200px;
    background-color:#f0f0f0;
    border:1px solid #f0f0f0;
    text-align: center;
}

JavaScript

$('.carousel [data-custom-slide-to]').click(function () {     
    var buttonText = $(this).html();
    var $carousel = $($(this).attr('href'));
    var newIndex = $(this).data('custom-slide-to');
    var slide = $carousel.find(".item")[newIndex];
    
    // update the panel
    $("h4", slide).html("From - " + buttonText);
    
    //move the carousel
    $carousel.carousel(newIndex);      
});