2

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

我想在“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">‹&lt;/a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
    </div>

我正在开发 Angular JS 项目。因此，任何角度解决方案都将受到高度赞赏。谢谢。

4

1 回答 1

0

尝试这个：

要在项目类 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">‹&lt;/a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
    </div>
于 2013-09-03T06:15:01.983 回答