jquery - Twitter Bootstrap Javascript 轮播多事件元素转换

Question

在我到目前为止发现的示例中，所有示例都一次显示一个元素。如果我想使用缩略图显示多个事件元素，示例显示元素本身内部包含多个缩略图。当我按“下一个”或“上一个”按钮时，“事件”类将被设置为另一个元素，因此该元素的所有内容都将被替换。

我想在“carousel-inner”类中显示多个事件元素。我设法做到了这一点，但不幸的是“下一个”和“上一个”按钮停止工作。以下是我迄今为止尝试过的解决方法。例如，我想在每次单击“下一个”或“上一个”按钮时移动两个事件元素。有什么建议吗？

<div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://ucsdnews.ucsd.edu/graphics/images/2009/11-09OceanRobots01.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
            <div class="item active">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.nmsfocean.org/files/windfarm-250x250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                       
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.notempire.com/images/uploads/Conserve_Our_Oceans-2.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.northcountrypublicradio.org/news/images/blacksmokervent_250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="https://lh6.googleusercontent.com/-jTLcTU1RvZc/Ts11y1haQqE/AAAAAAAAALk/xYJoRFK-ibw/s250-c-k-no/OceanSunfish" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://tcktcktck.org/wp-content/uploads/2011/09/ocean-heat.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/carousel-inner-->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>

我正在从事 Angular JS 元素。因此任何 Angular 解决方案都将受到高度赞赏。谢谢。

Answer 1

试试这个:

要在元素类 div 中一起显示的组元素

<div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://ucsdnews.ucsd.edu/graphics/images/2009/11-09OceanRobots01.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.nmsfocean.org/files/windfarm-250x250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                       
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.notempire.com/images/uploads/Conserve_Our_Oceans-2.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.northcountrypublicradio.org/news/images/blacksmokervent_250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="https://lh6.googleusercontent.com/-jTLcTU1RvZc/Ts11y1haQqE/AAAAAAAAALk/xYJoRFK-ibw/s250-c-k-no/OceanSunfish" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://tcktcktck.org/wp-content/uploads/2011/09/ocean-heat.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/carousel-inner-->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>