부트 스트랩 캐 러셀이 마지막 항목에서 사라집니다.

Question

이 회전 목마에는 항목/이미지가 완전히 2 개 있습니다. 두 번째 이미지가로드 된 후 회전식 메뉴가 세 번째 항목 (아무 것도 없음)으로 이동하려고하면 회전식 메뉴가 사라집니다. intervel 후에 회전식 사진기는 첫번째 심상으로 돌아온다. 회전식 같은 슬라이드

..

Item 1 > Item 2 > Disappear > Item 1 > ... 

버전 2.1 jQuery를 부트 스트랩 1.8.1이다. 아래는 코드입니다.

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script> 
<script type="text/javascript" src="media/jui/js/bootstrap.min.js"></script> 

<div id="homeCarousel" class="carousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/hawk2.jpg" alt="" > 
      </div> 
      <div class="item"> 
       <img src="images/hawk5.jpg" alt="" > 
      </div> 

      <div class="carousel-caption"> 
        <ul class="nav nav-tabs"> 
        <li class="active"><a href="#home" data-toggle="tab"> 
          <h1>**</h1> 
          <h4>Business Applications</h4> 
        </a></li> 
        <li><a href="#profile" data-toggle="tab"><h1>**</h1> 
          <h4>IT Infrastructure</h4></a></li> 
        <li><a href="#messages" data-toggle="tab"><h1>**</h1> 
          <h4>Web & Content</h4></a></li> 
       </ul> 

      </div> 
      <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a> 
      <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a> 

     </div> 
    </div> 

무엇이 잘못 될 수 있습니까?

-Update : 나는 1.8.3과 부트 스트랩에 jQuery를 업데이트하려고 2.2.2 - 없음 변경

Answer 1

카루셀 캡션은 어떤 항목 클래스 내부에 있어야한다 :

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script> 
<script type="text/javascript" src="media/jui/js/bootstrap.min.js"></script> 

<div id="homeCarousel" class="carousel"> 
<div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/hawk2.jpg" alt="" > 
     <div class="carousel-caption"> <!-- carousel-caption begin --> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#home" data-toggle="tab"> 
         <h1>**</h1> 
         <h4>Business Applications</h4> 
       </a></li> 
       <li><a href="#profile" data-toggle="tab"> 
        <h1>**</h1> 
        <h4>IT Infrastructure</h4> 
       </a></li> 
       <li><a href="#messages" data-toggle="tab"> 
        <h1>**</h1> 
        <h4>Web & Content</h4> 
       </a></li> 
      </ul> 
     </div> <!-- carousel-caption end --> 
    </div> 
    <div class="item"> 
     <img src="images/hawk5.jpg" alt="" > 
     <div class="carousel-caption"> <!-- carousel-caption begin --> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#home" data-toggle="tab"> 
         <h1>**</h1> 
         <h4>Business Applications</h4> 
       </a></li> 
       <li><a href="#profile" data-toggle="tab"> 
        <h1>**</h1> 
        <h4>IT Infrastructure</h4> 
       </a></li> 
       <li><a href="#messages" data-toggle="tab"> 
        <h1>**</h1> 
        <h4>Web & Content</h4> 
       </a></li> 
      </ul> 
     </div> <!-- carousel-caption end --> 
    </div> 
    </div> 
    <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a> 
    <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a> 
</div> 

Answer 2

가했다 동일한 문제가 발생하여 .carousel-inner div 외부에 다음 및 이전 버튼을 넣어야합니다.

코드에는 해당 div의 다음 및 이전 버튼이 있습니다.