트위터 부트 스트랩이있는 무한 회전 목마

Question

나는 회전 목마가 있으며 트위터 부트 스트랩을 사용하고 있습니다.

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 캐 러셀의 기본 동작은 항목을 무한정 순환시키는 것입니다. 옵션 섹션에서 회전 목마에 대한 설명서에서 Bootstrap 3 documentation - see carousel section

사이클 동작이 랩이라는 기본 값은 그래서 그 사실로 설정 제어 설정을 : 부트 스트랩 3 문서에서 첫 번째 회전 목마의 예를 참조하십시오 주기적으로 순환합니다.

는

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

의