Twitter Bootstrap旋轉木馬幻燈片不起作用

我試圖實現Twitter Bootstrap旋轉木馬插件。它看起來和自動循環正確，但項目之間的幻燈片效果不起作用。它只是靜態替換下一個項目。雖然它是功能性的，但這還不夠令人滿意的用戶體驗。思考？Twitter Bootstrap旋轉木馬幻燈片不起作用

<div class="span7"> 
     <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/CoachellaValley.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 1</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley2.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 2</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley3.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 3</h4> 
       </div> 
      </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     </div> 
[...] 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $('#myCarousel').carousel(); 
    }) 
    </script>

來源

2012-04-03 d_meyer

你正在測試什麼瀏覽器？ – 2012-04-03 01:25:11

Chrome beta channel – 2012-04-03 02:28:10

對讀者的警告：確保您還將類「幻燈片」添加到旋轉木馬div，否則您將遇到相同的症狀（圖像更改但不是動畫）。在這個線程中發佈並解決了類似的問題（請參閱第二條評論）：http://stackoverflow.com/questions/10660718/twitter-bootstrap-carousel-not-sliding – 2016-04-30 14:09:00

試試這個：

刪除您的所有文檔中加載以下JS腳本：

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

而只是保持在相同的順序如下（jQuery的先行）

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap.js"></script>

我相信的問題是，除了多次加載相同的腳本文件s（bootstrap js文件已包含所有插件，因此不需要包含min版本（現在保存用於生產）或單個單獨的腳本文件），則不會加載bootstrap.js中包含的轉換腳本文件，因爲你的腳本加載順序的。

來源

2012-04-03 02:49:20

就是這樣。謝謝。 – 2012-04-07 17:31:30

新政是，如果我使用class="carousel"的轉盤容器和

$('.carousel').carousel('slide',{interval:1000});

它僅適用於一個左\點擊右鍵，工作非常細（但只有一次）。

如果使用class="carousel slide" 和

$('.carousel .slide').carousel('slide',{interval:1000});

然後轉盤開關但沒有滑動的動畫效果。

來源

2012-05-03 03:57:27 koles

'$（'。carousel .slide'）'與$（'。carousel.slide'）'（不帶空格）不一樣。後者會工作，而前者只會在'class = carousel'的子節點上定位'class = slide' – 2013-01-17 16:49:51

與此掙扎了一會兒後，我已經找到了solution - 你只需要包括

引導-transition.js

和幻燈片動畫會工作。

來源

2012-06-06 10:59:45

Andres Ilich的回答表明'bootstrap-transition.js'代碼實際上已經包含在main' bootstrap.js'。如果這是真的，你的答案會變得不正確 - 不需要額外加載'bootstrap-transition.js'文件。 – trejder 2013-09-25 13:09:35

這是答案，我不知何故在bootstrap.js中被註釋掉了。：d – Michael 2015-08-14 11:49:30

你的代碼是正確的.. 在我的系統的代碼工作正常..

有沒有「幻燈片」類的定義爲引導3..But類「滑動」，旋轉木馬圖像將與改變任何動畫效果..

在你的代碼

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

檢查引導CSS & JS參考你的代碼.. 添加這個腳本，並檢查參考f的順序爾斯

你可以按照這個順序： -

bootstrap.css
引導-theme.css
jQuery的1.9.1。JS
bootstrap.js

腳本塊不會出JQ Library..So工作添加JQ庫文件正確..

，並確保JQ文件中的腳本工作之前加載..爲此，您可以在頁面頂部添加參考

來源

2014-05-20 11:21:50

即使此問題已成功回答 - 我來到這裏尋找類似問題的答案。

我在轉盤上的第一件物品像往常一樣向左滑動，但第二件物品不在其後面。一旦第一個項目離開屏幕，第二個項目就會出現，而不是滑入。然後它將消失，並且第一個項目將正確滑入。

如果您遇到此問題，請檢查您沒有位置：relative;在.item div上。

我補充說，像這樣：

.carousel-inner > .item { 
    position:relative; 
    height:495px; 
}

原來，食堂的事情了。移除位置：相對;解決了這個問題。現在滑動是平穩和正確的。

來源

2014-12-19 21:51:21 Steve

Twitter Bootstrap旋轉木馬幻燈片不起作用

回答

相關問題