use*_*460 3 javascript wordpress jquery carousel owl-carousel
我正在使用Owl Carousel 2 JQuery插件使用JQuery轮播构建一个wordpress网站.我之前已经成功使用过这个旋转木马,但是我很难过这个,我需要你的帮助.我希望其他可能遇到同样问题的人可以参考这个解决方案.
旋转木马将加载,图像正在显示,我尝试过的大多数选项都在工作,但自动播放不会在5秒后加载下一张图像.正如使用Firebug网络检查器验证的那样,所有文件都在正确的位置并正确加载.感谢您的帮助/建议!
customjs.js:
$(document).ready(function(){
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
});
});
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>
我也尝试owl.trigger('owl.play',6000);在document.ready函数中追加这个stackoverflow线程的建议无济于事.
弄清楚了.哇,简直不敢相信我错过了.必须在该部分中包含autoplay.js
<script src="owl/js/owl.autoplay.js"></script>