Question

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

我想在'carousel-inner'类中显示多个活动项。我设法做到了，但不幸的是'Next'和'Previous'按钮停止工作。以下是我到目前为止尝试的解决方法。例如，我想按“下一个”或“上一个”按钮单击移动两个活动项目。有什么建议吗？

<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项目。因此，任何有角度的解决方感谢。

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>

Twitter Bootstrap Javascript Carousel多个活动项目转换

1 个答案: