爲什麼Twitter Bootstrap的輪播不適合我？

我有以下代碼：爲什麼Twitter Bootstrap的輪播不適合我？

<html> 
    <head> 
     <link href="css/bootstrap.min.css" rel="stylesheet" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
      $('.carousel').carousel(); 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="welcome-carousel" class="carousel slide"><!-- class of slide for animation --> 
      <div class="carousel-inner"> 
      <div class="item active"><!-- class of active since it's the first item --> 
       <img src="img/image1.png" alt="" /> 
      </div> 
      <div class="item"> 
       <img src="img/image4.png" alt="" /> 
      </div> 
      <div class="item"> 
       <img src="img/image3.png" alt="" /> 
       <div class="carousel-caption"> 
       <p>Hello to the WORLD!</p> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/image2.png" alt="" /> 
       <div class="carousel-caption"> 
       <p>Hello to the WORLD!</p> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/image1.png" alt="" /> 
       <div class="carousel-caption"> 
       <p>Hello to the WORLD!</p> 
       </div> 
      </div> 
      </div><!-- /.carousel-inner --> 
      <!-- Next and Previous controls below 
       href values must reference the id for this carousel --> 
      <a class="carousel-control left" href="#welcome-carousel" data-slide="prev">&lsaquo;</a> 
      <a class="carousel-control right" href="#welcome-carousel" data-slide="next">&rsaquo;</a> 
     </div> 
    </body> 
</html>

這是一個index.html文件。在同一個目錄中有一個名爲js的目錄，其中包含boostrap.min.js，以及一個名爲css的css目錄，其中包含boostrap.min.css。最後，一個文件夾呼叫img，當我下載它時，TB給出的圖像和我的畫廊的圖像。

基本上，它看起來像這樣：

當我點擊箭頭，圖像也不會改變。另外，我希望箭頭位於圖像內，而不是像這樣。

來源

2012-11-04 Doug Smith

控制檯中的任何錯誤？你似乎在跟隨結核病的例子，很難看到。你有沒有改變它來完全複製這個例子？ – nickhar

另請參閱：// // ajax.googleapis.com !??前綴與'http：' – nickhar

它看起來好像你沒有拉動bootstrap-carousel.js - 這是使用Carousel功能所必需的。

我不從你的代碼知道上面，如果你正在構建（可在這裏：http://twitter.github.com/bootstrap/customize.html）引導的定製版本，但如果你沒有，你需要下載/包括（或遠程調用）：

<script src="js/bootstrap-carousel.js"></script>

除了縮小的基本版本。

您可能希望考慮的一個小說增加/選項是：http://www.bootstrapcdn.com/這是一個好主意並且可能派上用場。

你也呼籲//ajax.googleapis.com

希望這有助於排除http:。

來源

2012-11-05 00:04:13 nickhar

我正在使用一個自定義的，所以它被包括在內。問題是nickhar在評論中指出的缺乏http :,但是你的網站（我喜歡順便說一句，謝謝）也省略了它，這給了我一些問題，直到我將它加回來。他們爲什麼這樣做呢？ –

@DougSmith這是奇怪的不是它，但很高興你已經解決了它！ :) – nickhar

在我的答案中包含'http：'！ :)另外，你使用的是哪種瀏覽器？ Chrome只接受'//'，但經驗讓我更加關注其他人...... – nickhar

使用在你的HTML和減記Jquery的像引導旋轉木馬的所有元素這個

<script type="text/javascript"> 
!function ($) { 
    var $window = $(window) 

    $(document).ready(function() { 
     $('.carousel').carousel(); 
    }); 
} (window.jQuery) 
</script>

來源

2013-02-08 19:09:09 Sashi

在和iOS上的Safari瀏覽器的轉盤問題，發現一個線程表達了包括.css文件是錯誤地忽略了爲某些瀏覽器添加瀏覽器前綴。我的錯誤稍有不同（加載幻燈片圖片失敗）我用當前版本替換了我以前的bootstrap.css文件（已經使用3.2.1更新到3.3.2），並解決了這個問題。愛一個簡單的修復。

來源

2015-02-12 12:50:07

爲什麼Twitter Bootstrap的輪播不適合我？

回答

相關問題