2012-05-18 156 views
23

我遇到了一個有趣的問題。我很確定答案非常簡單,但我無法弄清楚,所以我想我會尋求一些幫助。Twitter Bootstrap旋轉木馬不滑

基本上,我的傳送帶不滑動。它只是切換圖像。我甚至試圖將bootstrap網站中的確切HTML複製到我自己的頁面中,但它仍然不會滑動。在application.js中,初始化也沒有參數。

// carousel demo 
$('#myCarousel').carousel() 

我注意到,點擊PREF /前進按鈕時,next和prev類添加到每個項目,但它似乎並沒有做我的同樣的事情。我在調試時沒有看到任何錯誤。

我錯過了什麼?我在最新版本的Chrome和Safari中測試了這一點。

+2

'基本上,我的傳送帶不滑動。它只是切換圖像。「所以旋轉木馬」是「工作,只是沒有幻燈片效果? –

+8

爲了澄清,傳送帶正在工作,但幻燈片效果不存在。我剛纔發現你還需要爲任何動畫添加bootstrap-transition.js,並確保你在用作旋轉木馬容器的div上添加了一個名爲「slide」的類。 直到8小時後我纔回答我自己的問題,但這是問題的答案。 – juminoz

回答

44

您還必須添加bootstrap-transition爲滑動的工作,像這樣:

<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script> 
+3

只有在使用bootstrap.js的非縮小版本時纔是如此。縮小的包括轉換代碼。 –

+0

@MichaelTeper的上述提示是我的勝利者,解決了我的問題。 Upvoted。值得成爲一個獨立的答案。謝謝邁克爾。 – user776686

24

我有同樣的問題,但如果引導V2.0.3(已轉換捆綁),最終加入投影片類至轉盤DIV

<div id="myCarousel" class="carousel slide"> 

那麼你只要致電:

$('#myCarousel').carousel(); 
+0

如果你正在使用引導程序1.x--嘗試使用引導程序2.x--它爲我解決了這個問題 – niico

+0

在引導程序3中爲我加了'slide'類。 – neno

0

你只是把這個JavaScript放在<script>標籤中?

<script> 
    $('.carousel').carousel({ 
     interval: 1000 
    })​; 
</script> 
-2

檢查你是否已包括了CSS文件。嘗試並添加bootstrap.css文件以及bootstrap.min.css。它爲我工作。