Javascript Bootstrap Carousel 不会自动滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11233449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel Not Automatically Sliding
提问by William H
I'm using bootstrap by Twitter's carousel (latest version) and I've got it working - except that it doesn't begin to automatically slide. It works well after you've clicked one of the navigation buttons . Not sure why it's doing this.
我正在通过 Twitter 的轮播（最新版本）使用引导程序，并且我已经让它工作了 - 除了它没有开始自动滑动。单击导航按钮之一后，它运行良好。不知道为什么要这样做。
Here's my JS setup in the header:
这是我在标题中的 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>
And the HTML:
和 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>
Also just added this to no avail:
也只是添加了这个无济于事：
<script>
$('#myCarousel').carousel({
interval: 1200
});
</script>
After making the above change, the javascript console says:
进行上述更改后，javascript 控制台显示：
Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u
Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u
Any thoughts on why this wouldn't be working?
关于为什么这不起作用的任何想法？
回答by baptme
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
</script>
If it still is not working, look for potential errors in the browser's (firebug/chrome..) console.
如果仍然无法正常工作，请在浏览器的 (firebug/chrome..) 控制台中查找潜在错误。
For
为了
Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u
Make sure:
确保：
Only one jQuery is included
只包含一个 jQuery
Only one bootstrap-carousel.js or bootstrap.js is included.
只包含一个 bootstrap-carousel.js 或 bootstrap.js。
jQuery is included first, then bootstrap-carousel.js or bootstrap.js, then $(document).ready( ...
首先包含 jQuery，然后是 bootstrap-carousel.js 或 bootstrap.js，然后是 $(document).ready( ...
回答by Jordizle
Sometimes using the wrong version of JQuery can effect the actions of the Twitters Boostrap carousel. They are currently running v1.7.1, if your using different it may be causing the errors.
有时使用错误版本的 JQuery 会影响 Twitters Boostrap carousel 的操作。他们目前正在运行 v1.7.1，如果您使用不同的它可能会导致错误。
If your not running v1.7.1 you can download it from here:
如果您没有运行 v1.7.1，您可以从这里下载：
http://code.jquery.com/jquery-1.7.1.min.js
http://code.jquery.com/jquery-1.7.1.min.js
Also make sure that your code is wrapped in a document ready :
还要确保您的代码包装在准备好的文档中：
$(document).ready(function () {
// code here
});
回答by Mujahidul Jahid
I had your same problem and found the solution; As we both put the javascripts at the end of the page, the calling of the function must be put after them:
我遇到了同样的问题并找到了解决方案；由于我们都将 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 });
});
Sometimes you need to put the JavaScript file after the carousal. Actually before the end of the page.
有时您需要将 JavaScript 文件放在 carousal 之后。实际上在页面结束之前。
Ref: http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/
参考：http: //twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/
Happy coding. Thanks
快乐编码。谢谢
回答by Shuyaib
<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>
回答by Frederick Eze
If you are using NgRouteand the above solutions didn't work for you, be sure to include the following javascript code on the very top of the template NgRouteinjects into the <ng-view></ng-view>:
如果您正在使用NgRoute并且上述解决方案对您不起作用，请确保在模板NgRoute注入的最顶部包含以下 javascript 代码<ng-view></ng-view>：
<script type="text/javascript"> $(document).ready(function() { $('#Carousel').carousel({ interval: 2500 }) });
Also ensure that jQuery is included first before bootstrap.js is included. This helped me when I had this problem on my project.
还要确保在包含 bootstrap.js 之前首先包含 jQuery。当我的项目遇到这个问题时，这对我有帮助。
