Bootstrap的傳送帶不會顯示我的圖像或對控件作出反應。Bootstrap 3傳送帶不工作

這是我的HTML：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Skates R Us</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/global.css"> 
    </head> 

    <body> 
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a href="#" class="navbar-brand"> 
         Skates R Us 
        </a> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="active"> 
          <a href="index.html">Home</a> 
         </li> 
         <li> 
          <a href="contact.html">Contact/About</a> 
         </li> 
         <li> 
          <a href="shop.html">Shop</a> 
         </li> 
         <li> 
          <a href="new.html">New Products</a> 
         </li> 
         <li> 
          <a href="media.html">Media</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div id="carousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="carousel" data-slide-to="0"></li> 
       <li data-target="carousel" data-slide-to="1"></li> 
       <li data-target="carousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item"> 
        <img src="img/slide_1.png" alt="Slide 1"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_2.png" alt="Slide 2"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_3.png" alt="Slide 3"> 
       </div> 
      </div> 
      <a href="#carousel" class="left carousel-control" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a href="#carousel" class="right carousel-control" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script> 
      $("#carousel").carousel(); 
     </script> 
    </body> 
</html>

我的CSS：

#carousel { 

    margin-top: 50px; 

} 

.carousel { 
    height: 500px; 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    width: 100%; 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

@media (min-width: 768px) { 
    .carousel-caption p { 
      margin-bottom: 20px; 
      font-size: 21px; 
      line-height: 1.4; 
    } 
} 

img { 
    background: red; 
}

有在Chrome控制檯沒有錯誤，代碼幾乎是完全一樣的，從引導程序的例子。

這是該網站看起來像在我結束： Site

來源

2013-12-17 Liam Potter

可能是因爲您沒有準備好jQuery文檔就緒代碼：http://learn.jquery.com/using-jquery-core/document-ready/ –

您正在使用哪個版本的Bootstrap？ 2.3.2還是3.0？ – Ranveer

我正在使用Bootstrap 3.0 –

只是有兩個小東西在這裏。

首先是在下面的傳送帶指示符列表項：

<li data-target="carousel" data-slide-to="0"></li>

您需要通過data-target屬性一個選擇這意味着ID必須以#前綴。所以他們更改爲以下：

<li data-target="#carousel" data-slide-to="0"></li>

其次，你需要給傳送帶上的起點因此兩個轉盤指標項目和轉盤內的項目必須有一個active類。就像這樣：

<ol class="carousel-indicators"> 
    <li data-target="#carousel" data-slide-to="0" class="active"></li> 
    <!-- Other Items --> 
</ol> 
<div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" /> 
    </div> 
    <!-- Other Items --> 
</div>

Working Demo in Fiddle

來源

2013-12-20 21:50:06 KyleMit

@ user2133268，當提問時你真的應該儘量做好儘可能多的工作，使它成爲一個**好問題。這裏有一噸*代碼，與你的例子無關。您通常應該嘗試將代碼放入jsfiddle.net或bootply.com，以便其他人可以立即進行調試。您應該從文檔中的一個工作示例開始，逐行比較以查看其不同之處。這些都是您*可以主動回答自己的問題的方法。他們*授權*你。這是一種良好的禮儀，但它也使你在編程時更好。 – KyleMit

非常有幫助的小提琴 – Pitelk

** SO **特別強制在帖子中發佈代碼，如果你必須發佈jsfiddle鏈接！ @KyleMit –

以下是你需要做

只需用下面的代碼

你已經錯過了「＃」的數據替換轉盤格的變化目標並添加第一個項目的活動類

<div id="carousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel" data-slide-to="0"></li> 
       <li data-target="#carousel" data-slide-to="1"></li> 
       <li data-target="#carousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="img/slide_1.png" alt="Slide 1"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_2.png" alt="Slide 2"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_3.png" alt="Slide 3"> 
       </div> 
      </div> 
      <a href="#carousel" class="left carousel-control" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a href="#carousel" class="right carousel-control" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div>

來源

2014-09-04 07:48:38

我們Bootstrap Carousel有各種參數可以控制。

即

間隔：指定每個幻燈片之間的延遲（毫秒）。

暫停：當鼠標指針進入傳送帶時暫停傳送帶通過下一張幻燈片，並在鼠標指針離開傳送帶時繼續滑動。

包裝：指定傳送帶是否應該通過所有幻燈片持續，或在最後一張幻燈片

停止供您參考：

富勒詳細信息，請click here...

希望這會對你有所幫助:)

注意：這是爲了進一步的幫助..我的意思是一旦加載轉盤後，您如何定製或更改默認行爲。

來源

2016-03-16 09:23:38

這是爲了進一步的幫助..我的意思是一旦加載轉盤後，你如何定製或更改默認行爲。 –

對我來說，旋轉木馬不在DreamWeaver CC中工作，在我正在玩的「模板」頁面中提供了代碼。我需要將data-ride =「carousel」屬性添加到輪播div以便其開始工作。感謝Adarsh爲他的代碼片斷突出了缺失的屬性。

來源

2018-01-26 09:28:57 Paulepops

Bootstrap 3傳送帶不工作

回答

Working Demo in Fiddle

相關問題