Javascript 猫头鹰旋转木马不会自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26351046/
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
Owl Carousel Will Not Autoplay
提问by user4139460
I'm building a wordpress site with a JQuery carousel using the Owl Carousel 2JQuery plugin. I've used this carousel before with success, but I'm stumped on this one and I need your help. I'm hoping others who may run into the same issue can reference this solution you all help with.
我正在使用Owl Carousel 2JQuery 插件构建一个带有 JQuery carousel 的 wordpress 站点。我以前成功地使用过这个旋转木马，但我被这个难住了，我需要你的帮助。我希望可能遇到同样问题的其他人可以参考这个解决方案，你们都帮忙。
The carousel will load, images are displaying, and most options that I've tried are working, but autoplay will not load the next image after 5 seconds. All files are in their proper place and loading correctly, as verified using the Firebug network inspector. Thank you for your help/suggestions in advance!
轮播将加载，图像正在显示，我尝试过的大多数选项都可以使用，但自动播放不会在 5 秒后加载下一张图像。如使用 Firebug 网络检查器验证的那样，所有文件都位于适当的位置并正确加载。提前感谢您的帮助/建议！
customjs.js:
customjs.js：
$(document).ready(function(){
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
});
});
HTML:
HTML：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="owl/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="customjs.js"></script>
</head>
<body>
<div id="feature" class="full">
<!-- FEATURE ROTATOR -->
<div id="home-feature" class="owl-carousel owl-theme">
<div class="item">
<a href="#">
<img src="/images/home/rotator1.jpg"
alt="Feature 1"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator2.jpg"
alt="Feature 2"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator3.jpg"
alt="Feature 3"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator4.jpg"
alt="Feature 4"/>
</a>
</div>
</div>
</div>
</body>
I have also tried appending owl.trigger('owl.play',6000);within the document.ready function per a suggestion on this stackoverflow threadto no avail.
我还尝试owl.trigger('owl.play',6000);根据此 stackoverflow 线程上的建议在 document.ready 函数中附加，但无济于事。
回答by user4139460
Figured it out. Wow, can't believe I missed that. Had to include the autoplay.js in the section
弄清楚了。哇，不敢相信我错过了。必须在该部分中包含 autoplay.js
<script src="owl/js/owl.autoplay.js"></script>
回答by Chamath Nimantha
I also faced a similar issue. Then I searched and found a solution that the autoplayshould be re-corrected as autoPlaywith p as capital. And it worked for me.
我也遇到了类似的问题。然后我搜索并找到了一个解决方案，autoplay应该像autoPlay以 p 为大写一样重新更正。它对我有用。
回答by 0x1ad2
If you download it from Github (OwlCarousel2 src folder) you will get seperate files and you need to include it specify owl.autoplay.js& owl.carousel.jsseparately in your HTML.
如果您从 Github（OwlCarousel2 src 文件夹）下载它，您将获得单独的文件，您需要在 HTML 中分别指定owl.autoplay.js和owl.carousel.js。
If you download it from Owl Carousel′swebsite owl.autoplay.jsis included in the owl.carousel.jsfile.
如果您从Owl Carousel 的网站下载它，owl.autoplay.js包含在owl.carousel.js文件中。
回答by sambua
It's stupid solution but maybe somebody can face with it.
这是愚蠢的解决方案，但也许有人可以面对它。
I've worked in others code, so he call owlCarousel() with "autoPlay: false", in one of included javascript files. I called it after he call owlCarousel() function with "autoPlay: true". But it's not worked and also browser don't give any notification inn console if it's calling twice the same function.
我在其他代码中工作过，所以他在包含的 javascript 文件之一中使用“autoPlay：false”调用 owlCarousel()。我在他用“autoPlay: true”调用 owlCarousel() 函数之后调用了它。但它不起作用，如果浏览器调用两次相同的函数，它也不会给出任何通知旅馆控制台。
回答by Kako Sabolo
owl.owlCarousel({
items:4,
nav:true,
loop:true,
autoWidth:true,
itemsTablet: [768,1]
});
First, you need to call the owl.autoplay.js.
This code works for me:
owl.trigger('play.owl.autoplay',[1000]);
首先，您需要调用 owl.autoplay.js。
这段代码对我有用：
owl.trigger('play.owl.autoplay',[1000]);
回答by Ali
This is what you need to do, when you call the owl-demo / owl-carousel you need to add
| autoPlay: 3000 | (----- 3000 = 3sec rotation between images.
You don't need to touch anything else.
这就是你需要做的，当你调用 owl-demo / owl-carousel 时你需要添加
| 自动播放：3000 | (----- 3000 = 3sec 图像之间的旋转。
您不需要触摸其他任何东西。
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : false,
singleItem : true,
autoPlay: 3000,
transitionStyle : "fadeUp"
});
});
回答by suneera
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
margin:10,
autoPlay: 3000,
autoplaySpeed:2000
});
});
