Question

我正在使用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>

我还尝试在this stackoverflow thread的建议中在document.ready函数中添加owl.trigger('owl.play',6000);，但无济于事。

Answer 1

想出来。哇，我不相信我错过了。必须在

部分中包含autoplay.js

<script src="owl/js/owl.autoplay.js"></script>

Answer 2

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

Answer 3

如果您从Github（OwlCarousel2 src folder）下载它，您将获得单独的文件，您需要包含它指定 owl.autoplay.js ＆amp; HTML中单独使用 owl.carousel.js 。

如果您从Owl Carousel´s网站下载 owl.autoplay.js ，则 owl.carousel.js 文件中包含

。

Answer 4

这是一个愚蠢的解决方案，但也许有人可以面对它。

我曾在其他代码中工作，因此他在一个包含的javascript文件中使用“autoPlay：false”调用owlCarousel（）。我用“autoPlay：true”调用owlCarousel（）函数后调用它。但它没有用，如果它调用两次相同的功能，浏览器也不会在控制台上发出任何通知。

Answer 5

owl.owlCarousel({
        items:4,
        nav:true,
        loop:true,
        autoWidth:true,
        itemsTablet: [768,1]
    });

首先，您需要调用owl.autoplay.js。

此代码适用于我：

owl.trigger('play.owl.autoplay',[1000]);

Answer 6

这是你需要做的，当你调用你需要添加的owl-demo / owl-carousel时autoPlay：3000 | （----- 3000 =图像之间旋转3秒。
你不需要触摸任何其他东西。

if (song == "heavydirtysoul", "ode to sleep", "fake you out", "forest")
{ document.getElementById("result").innerHTML = "yes";
}

Answer 7

$(document).ready(function() {

      var owl = $('.owl-carousel');
        owl.owlCarousel({
            items:4,
            margin:10,
            autoPlay: 3000,
            autoplaySpeed:2000  
        });
});

猫头鹰旋转木马不会自动播放

7 个答案: