Bootstrap Carousel不會自動滑動

Question

我正在使用Twitter的旋轉木馬（最新版本）引導程序，我已經開始工作了 - 除了它沒有開始自動滑動。 單擊其中一個導航按鈕后，它可以正常工作。 不知道為什么會這樣做。

這是標題中的我的JS設置：

    <script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script>

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script>
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>

和HTML：

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

    <div class="active item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>


    <div class="item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

也只是添加這個無濟於事：

<script>
$('#myCarousel').carousel({
    interval: 1200
});
</script>

完成上述更改后，javascript控制台會說：

未捕獲的TypeError：Object＃沒有方法'carousel'（匿名函數）b.extend.ready jquery.min.js：29 u

為什么這不起作用的任何想法？

Answer 1

<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 1200
    })
  });
</script>

如果它仍然無法正常工作，請在瀏覽器（firebug / chrome ..）控制台中查找潛在錯誤。

---

對於

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

確保：

只包含一個jQuery

僅包含一個bootstrap-carousel.js或bootstrap.js。

首先包含jQuery，然后是bootstrap-carousel.js或bootstrap.js，然后是$（document）.ready（...

Answer 2

有時使用錯誤版本的JQuery會影響Twitters Boostrap輪播的動作。 它們目前正在運行v1.7.1，如果你使用不同它可能會導致錯誤。

如果您沒有運行v1.7.1，可以從這里下載：

http://code.jquery.com/jquery-1.7.1.min.js

還要確保您的代碼包裝在准備好的文檔中：

  $(document).ready(function () {
      // code here
  });

Answer 3

我有同樣的問題並找到了解決方案; 因為我們都將javascripts放在頁面的末尾，所以必須在它們之后調用函數：

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

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() { 
  $('#myCarousel').carousel({ interval: 3000, cycle: true });
}); 

有時您需要將JavaScript文件放在carousal之后。 實際上在頁面結束之前。

參考： http ： //twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

快樂的編碼。 謝謝

Answer 4

 <script language="javascript" type="text/javascript">
 $(window).load(function() 
 {       
     $("#slideshow > div:gt(0)").hide();
     setInterval(function() { 
       $('#slideshow > div:first')
       .fadeOut(750)
       .next()
       .fadeIn(1000)
       .end()
       .appendTo('#slideshow');
                            },  11000);
  });
</script>

Answer 5

如果您正在使用NgRoute並且上述解決方案不適合您，請確保在模板的最頂部包含以下javascript代碼NgRoute注入<ng-view></ng-view> ：

  <script type="text/javascript"> $(document).ready(function() { $('#Carousel').carousel({ interval: 2500 }) });

還要確保在包含bootstrap.js之前首先包含jQuery。 當我在我的項目中遇到這個問題時，這幫助了我。