14

我正在使用 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">‹&lt;/a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>

也只是添加了这个无济于事：

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

进行上述更改后，javascript 控制台显示：

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

关于为什么这不起作用的任何想法？

4

5 回答 5

40 
<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( ...

于 2012-06-27T19:37:29.227 回答
4

有时使用错误版本的 JQuery 会影响 Twitters Boostrap 轮播的操作。他们目前正在运行 v1.7.1，如果您使用不同的版本，可能会导致错误。

如果您没有运行 v1.7.1，您可以从这里下载：

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

还要确保您的代码已包装在准备好的文档中：

  $(document).ready(function () {
      // code here
  });
于 2012-06-27T19:37:58.900 回答
1

我遇到了同样的问题并找到了解决方案；由于我们都将 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 文件放在轮播之后。实际上在页面结束之前。

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

快乐编码。谢谢

于 2014-02-03T17:28:21.020 回答
0 
 <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>
于 2017-10-17T21:23:36.550 回答
0

如果您正在使用NgRoute并且上述解决方案对您不起作用，请务必在模板NgRoute注入的最顶部包含以下 javascript 代码<ng-view></ng-view>：

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

还要确保在包含 bootstrap.js 之前首先包含 jQuery。当我在项目中遇到这个问题时，这对我有帮助。

于 2018-01-31T06:50:13.010 回答