bootstrap carousel passing data between Panels

Please can someone give me a hint over my question below. Thanks.

I'm trying to create dynamic Bootstrap Carousel panels. Basically i have two items in carousel and based on the button clicked on the first panel, I want to dynamically load the content in the Second Panel. below is the sample.

http://jsfiddle.net/sure2win/T4zSb/

HTML

<!-- language: lang-html -->

   <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-slide-to="1" class="btn btn-primary">click1</a>
       <a href="#ismdb" data-slide-to="1" class="btn btn-primary">click2</a>
      </div>
      <div class="item">
       <h3>Second Panel </h3><br>
       <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
      </div>
     </div>
    </div>

CSS

<!-- language: lang-css -->

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

Based on whether clicked on "Click1" or "Click2" on First Panel, I want to load the Second panel with text "Second Panel - Click1" or "Second Panel - Click2".

One option could be setting a global variable on click of the buttons, not so impressive option though. Any better ideas for passing data between Panels of Carousel?. Thanks.

Simple solutions first - why not add a third panel?

<!-- language: lang-html -->

<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-slide-to="1" class="btn btn-primary">click1</a>
            <a href="#ismdb" data-slide-to="2" class="btn btn-primary">click2</a>
        </div>
        <div class="item">
            <h3>Second Panel - Click 1</h3><br/>
            <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
        </div>
        <div class="item">
            <h3>Second Panel - Click 2</h3><br/>
            <a href="#ismdb" data-slide-to="0" class="btn btn-primary">Previous</a>
        </div>
    </div>
</div>

Demo in Fiddle

---

If you really needed to, you could implement your own data-slide-to functionality so you could trap the item that raised the event. Replace data-slide-to with <code>data-<b>custom</b>-slide-to</code>.

Then use your own implementation to move the carousel by handling click events. Here's a clone of the essential parts of data-slide-to in our own implementation:

<!-- language: lang-js -->

$('.carousel [data-custom-slide-to]').click(function () {     
    var $carousel = $($(this).attr('href'));
    var newIndex = $(this).data('custom-slide-to');
    $carousel.carousel(newIndex);      
});

Then add whatever code you'd like to update the new slide. For example:

<!-- language: lang-js -->

var buttonText = $(this).html();
var slide = $carousel.find(".item")[newIndex];
$("h4", slide).html("From - " + buttonText);

Demo in jsFiddle