Question

请有人在下面给我一个提示。感谢。

我正在尝试创建动态Bootstrap Carousel面板。基本上我在旋转木马上有两个项目，根据第一个面板上点击的按钮，我想动态加载第二个面板中的内容。以下是样本。

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

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

根据是否点击＆＃34; Click1＆＃34;或＆＃34; Click2＆＃34;在第一个面板上，我想加载带有文本的第二个面板＆＃34;第二个面板 - Click1＆＃34;或＆＃34;第二小组 - Click2＆＃34;。

一个选项可能是点击按钮设置全局变量，但不是那么令人印象深刻的选项。在轮播小组之间传递数据的任何更好的想法？感谢。

Answer 1

首先是简单的解决方案 - 为什么不添加第三个面板？

<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

如果您确实需要，可以实现自己的data-slide-to功能，以便捕获引发事件的项目。将data-slide-to替换为data-custom-slide-to。

然后使用您自己的实现通过处理点击事件来移动轮播。以下是我们自己实现中data-slide-to的基本部分的克隆：

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

然后添加您想要更新新幻灯片的任何代码。例如：

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

引导轮播在面板之间传递数据

1 个答案:

Demo in Fiddle

Demo in jsFiddle