带有Twitter Bootstrap的无限轮播 [英] Infinite carousel with Twitter Bootstrap

问题描述

我有一个旋转木马，并且我正在使用Twitter Bootstrap.

I have an carousel and i'm using Twitter Bootstrap.

我必须放入5件物品.我将举一个简单的例子:

I have to fit 5 items in it. I'll make a simple example:

<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个项目，然后单独显示一个项目. 有一种制作无限旋转木马的方法，这样第一个内容就出现在最后一个内容之后吗?

It shows 4 items and then shows one item alone. There's a way to make an infinite carousel so the first content appears right after the last?

item div由andforeach动态创建，其内容来自MYSQL数据库.

The item divs are created dynamically by and foreach, the contents comes from an MYSQL database.

推荐答案

Bootstrap 3轮播的默认行为是以无限方式循环浏览各个项目.请参阅Bootstrap 3文档中的第一个carousel示例: Bootstrap 3文档-请参见carousel部分

The default behavior for Bootstrap 3 carousel is to cycle through the items, in an infinite manner. See the first carousel example from the Bootstrap 3 documentation: Bootstrap 3 documentation - see carousel section

在轮播的文档中，在选项"部分中，控制循环行为的设置名为wrap，默认值设置为 true ，以便其连续循环.

From the documentation on carousel, in the Options section, the setting that controls the cycle behavior is named wrap and the default value is set to true so that it cycles continuously.

在下面的示例HTML中(来自文档)，请注意，每个内容(图像等)都将放在其自己的div容器中:

In the example HTML that follows (from documentation), please note that each content (image, etc.) will go in its own div container:

    <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>

这篇关于带有Twitter Bootstrap的无限轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！