jquery - 带有 Twitter Bootstrap 的无限轮播

Question

我有一个旋转木马，我正在使用 Twitter Bootstrap。

我必须在其中放入 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

Bootstrap 3 轮播的默认行为是以无限的方式循环遍历元素。请参阅 Bootstrap 3 文档中的第一个轮播示例:Bootstrap 3 documentation - see carousel section

从 carousel 的文档中，在 Options 部分，控制循环行为的设置名为 wrap，默认值设置为 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>