Question

我想实现这样的目标：Circular Content Carousel 但我正在使用Bootstrap，它已经有了它的Carousel组件。

有没有什么方法可以使用Bootstrap的Carousel和一些jquery来实现相同的功能/效果？或者任何人都知道其他任何方式实现这一目标由于网格布局，我很困惑。

P.S。当在引用的网站上点击“阅读更多”时，我对这种效果不感兴趣。

非常感谢您的帮助！

Answer 1

好的，我只是尝试了一些过期，我想我得到了我想要的东西。基本上，我试图在span10 div中装入5个盒子。但是5个盒子不是静止的，所以可能会变成6或7个或更多。所以我试图一次显示5个盒子（这是1'行'）作为'活动项目'。每5个盒子（实际上是div）是1个项目。

所以我想，你已经得到了它。以下是我的静态数据代码：

<div class="span10">
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item">
            <div class="row">
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
            </div>                          
        </div>
        <div class="item">
            <div class="row">
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>                  
            </div>                          
        </div>                             
    </div>                  
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>                     
</div>

它将在每个向右或向左滚动中显示5个方框。除非最后一组小于5。

Bootstrap内容轮播

1 个答案: