猫头鹰旋转木马不会自动播放 [英] Owl Carousel Will Not Autoplay

查看:91
本文介绍了猫头鹰旋转木马不会自动播放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 Owl Carousel 2 JQuery插件构建一个带有JQuery轮播的wordpress网站。我之前已经成功使用过这个旋转木马,但是我很难过这个,我需要你的帮助。我希望其他可能遇到同样问题的人可以参考这个解决方案。

I'm building a wordpress site with a JQuery carousel using the Owl Carousel 2 JQuery 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.

轮播将加载,图像正在显示,我尝试过的大多数选项都在工作,但自动播放不会在5秒后加载下一张图像。正如使用Firebug网络检查器验证的那样,所有文件都在正确的位置并正确加载。 提前感谢您的帮助/建议!

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!

customjs.js:

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',根据此stackoverflow线程<的建议,document.ready函数中的6000); / a>无济于事。

I have also tried appending owl.trigger('owl.play',6000); within the document.ready function per a suggestion on this stackoverflow thread to no avail.

推荐答案

我也面临类似的问题。然后我搜索并找到了一个解决方案, autoplay 应该重新更正为 autoPlay ,其中p为资本。它对我有用。

I also faced a similar issue. Then I searched and found a solution that the autoplay should be re-corrected as autoPlay with p as capital. And it worked for me.

这篇关于猫头鹰旋转木马不会自动播放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆