Bootstrap傳送帶正在執行步驟2而不是1

Question

我的帶Bootstrap的傳送帶正在跳過一張圖像，我找不到原因。基本上它從圖像1到圖像3，然後它轉到圖像2，然後從那裏跳回到圖像1並重復該循環。有人可以幫幫我嗎？

代碼轉盤：

<div class = "container"> 
     <div class = "container col-xs-6"> 
      <div id = "banners" class="carousel-slide" data-ride="carousel"> 
       <div class = "carousel-inner"> 
        <ol class = "carousel-indicators"> 
         <li data-target = "#banners" data-slide-to = "0" class = "active"></li> 
         <li data-target = "#banners" data-slide-to = "1"></li> 
         <li data-target = "#banners" data-slide-to = "2"></li> 
        </ol> 
        <div class = "item active"> 
         <img id = "banners" src = 'images\slide5.jpg' class = "img-responsive"/> 
        </div> 
        <div class = "item"> 
         <img id = "banners" src = 'images\slide4.jpg' class = "img-responsive"/> 
        </div> 
        <div class = "item"> 
         <img id = "banners" src = 'images\slide3.jpg' class = "img-responsive"/> 
        </div> 
       </div> 
       <script type='text/javascript'> 
        $(document).ready(function() { 
         $('.banners').carousel({ 
          interval: 2000 
         }) 
        });  
       </script> 
      </div> 
     </div> 
    </div> 

快速編輯：我也只注意到該指標不上點擊鼠標反應了，我該怎麼解決呢？

Answer 1

你的HTML結構有一些組件出來的地方或類/這是不正確的ID：

1）class="carousel-slide"應class="carousel slide"（不是複姓）

2）這個div後<div class="carousel-inner">應到位您的indicators和您的第一個item之前。

其他結構上的考慮：

1）使用id="banners"四個不同的時間，ID的應該只能使用一次。見explanation。

2）您使用的<div class="container"> <div class="container col-xs-6">這是任何優勢不和框架實際上就像這樣：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6"> 

3）你不需要class="img-responsive"。

4）使用xs（class="col-xs-6"）列類將極有可能將您的傳送帶縮小到極小的尺寸。

5）您可以使用data-interval="2000"（或您的JS）更改幻燈片的速度（這僅僅是信息，因爲它是，如果你關心的是速度）

見工作示例只是簡單：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div id="banners" class="carousel slide" data-ride="carousel" data-interval="5000"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#banners" data-slide-to="0" class="active"></li> 
 
      <li data-target="#banners" data-slide-to="1"></li> 
 
      <li data-target="#banners" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
      <img src='http://placehold.it/1350x550/f00/fff?text=Slide 1' /> 
 
      </div> 
 
      <div class="item"> 
 
      <img src='http://placehold.it/1350x550/000/fff?text=Slide 2' /> 
 
      </div> 
 
      <div class="item"> 
 
      <img src='http://placehold.it/1350x550/ff0/fff?text=Slide 3' /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <h3>XS Column Class: Resize your brower to see the difference.</h3> 
 
    <div class="col-xs-6"> 
 
     <div id="banners3" class="carousel slide" data-ride="carousel" data-interval="5000"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#banners3" data-slide-to="0" class="active"></li> 
 
      <li data-target="#banners3" data-slide-to="1"></li> 
 
      <li data-target="#banners3" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
      <img src='http://placehold.it/1350x550/000/fff?text=Slide 1' /> 
 
      </div> 
 
      <div class="item"> 
 
      <img src='http://placehold.it/1350x550/f00/fff?text=Slide 1' /> 
 
      </div> 
 
      <div class="item"> 
 
      <img src='http://placehold.it/1350x550/f00/fff?text=Slide 1' /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>