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

【问题标题】：Owl Carousel Will Not Autoplay猫头鹰旋转木马不会自动播放
【发布时间】：2014-10-14 00:46:03
【问题描述】：

我正在使用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);，但无济于事。

【问题讨论】：

我会等待最终版本在实际网站上使用它之前，还有很多东西需要解决。

标签： javascript jquery wordpress carousel owl-carousel

【解决方案1】：

想通了。哇，不敢相信我错过了。必须在该部分中包含 autoplay.js

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

【讨论】：

【解决方案2】：

我也遇到了类似的问题。然后我搜索并找到了一个解决方案，应将autoplay 重新更正为autoPlay，以p 为大写。它对我有用。

【讨论】：

你节省了我的 30 分钟！谢谢。
非常感谢...我使用的是 1.3.2 版本的 OWL。现在可以正常使用了。

【解决方案3】：

如果你从 Github (OwlCarousel2 src folder) 下载它，你会得到单独的文件，你需要包含它指定 owl.autoplay.js & owl.carousel.js 分别在您的 HTML 中。

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

【讨论】：

【解决方案4】：

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

我曾在其他代码中工作过，因此他在其中一个包含的 javascript 文件中使用“autoPlay: false”调用 owlCarousel()。在他用“autoPlay：true”调用owlCarousel（）函数后，我调用了它。但它不起作用，如果它调用两次相同的函数，浏览器也不会给任何通知客栈控制台。

【讨论】：

【解决方案5】：

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

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

此代码适用于我：

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

【讨论】：

【解决方案6】：

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

$(document).ready(function() {

  var owl = $("#owl-demo");

  owl.owlCarousel({
    navigation : false,
    singleItem : true,
    autoPlay: 3000,
    transitionStyle : "fadeUp"

  });

});

【讨论】：

【解决方案7】：

$(document).ready(function() {

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

【讨论】：