无限旋转木马与Twitter的引导(Infinite carousel with Twitter B

我有一个旋转木马，我使用Twitter的引导。

我必须适应在它5个项目。 我将做一个简单的例子：

<div id="carolsel" class="carousel slide" data-ride="carousel">
     <div class="carousel-inner">
          <div class="item active">
               <div class="col-lg-3">
                    <p>Content</p>
               </div>
               <div class="col-lg-3">
                    <p>Content</p>
               </div>
               <div class="col-lg-3">
                    <p>Content</p>
               </div>
               <div class="col-lg-3">
                    <p>Content</p>
               </div>
          </div>
          <div class="item">
               <div class="col-lg-3">
                    <p>Content</p>
               </div>
          </div>
     </div>
</div>

它显示了4个项目，然后单独显示一个项目。 有一种方法，所以第一个内容出现在最后的权利，使无限旋转木马？

该item的div被动态创建和foreach，内容来自一个MySQL数据库。

Answer 1:

自举3转盘的默认行为是通过循环的物品，在一个无限的方式。 从引导3文档看到的第一转盘例如： 自举3文档-见转盘部

从旋转木马上的文件，在选项部分，控制周期行为设置被命名为包装和默认值设置为true，这样不断循环它。

在下面（从文件）的例子HTML，请注意，每个内容（图片等）将在其自己的div容器去：

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

文章来源: Infinite carousel with Twitter Bootstrap