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

Question

我在我的网站上使用 Owl Carousel。根据他们的文档，这段 JavaScript 应该可以工作：

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)}
</script>

但由于某种原因，它不会自动播放。这是滑块的 HTML：

<div id="intro" class="owl-carousel">
    <div class="item first">
      <div class="container">
        <div class="row">
          <div class="carousel-caption-left colour-white">
            <h2>Title Text</h2>
            <h1>Sub title text here.</h1>
            <p>If you like you can even add a sentence or two here.</p>
          </div>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item second">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item third">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
</div>

score 86 · Accepted Answer

是的，它是一个打字错误。

写

自动播放

不是

自动播放

自动播放插件代码将变量定义为“autoPlay”。

score 42 · Accepted Answer

您可能使用了错误的 owl 文档版本。

autoPlay is for 1st version

autoplay is for 2nd version

score 18 · Accepted Answer

仅将自动播放更改为自动播放对我不起作用。诀窍是添加 autoplaySpeed 和 autoplayTimeout 属性并将它们设置为相同的值，如下所示：

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000,
        autoplayHoverPause: true
    });
});

这是一个工作演示：JS Bin

更多信息可以在这里找到：https ://github.com/smashingboxes/OwlCarousel2/issues/234

score 9 · Accepted Answer

9

添加这个

owl.trigger('owl.play',6000);

于 2014-06-04T07:35:48.887 回答

score 5 · Accepted Answer

您应该同时设置autoplay和autoplayTimeout属性。我使用了这段代码，它对我有用：

$('.owl-carousel').owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                navigation: false,
                margin: 10,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 2
                    }
                }
            })

score 4 · Accepted Answer

这段代码应该适合你

$("#intro").owlCarousel ({

        slideSpeed : 800,
        autoPlay: 6000,
        items : 1,
        stopOnHover : true,
        itemsDesktop : [1199,1],
        itemsDesktopSmall : [979,1],
        itemsTablet :   [768,1],
      });

score 4 · Accepted Answer

对于 2.3.4 版本，您需要添加 owl.autoplay.js 插件。然后执行以下操作

var owl = $('.owl-carousel');
owl.owlCarousel({
   items:1, //how many items you want to display
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true
});

score 3 · Accepted Answer

只是打字错误，

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)} ----- TYPO
</script>

它应该是-

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
}) ----- Correct
</script>

score 2 · Accepted Answer

你的 Javascript 应该是

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: true
)}
</script>

score 2 · Accepted Answer

在我的情况下，自动播放不起作用，但自动播放工作正常

我只用了这个

<script src="plugins/owlcarousel/owl.carousel.js"></script>

不需要 owl.autoplay.js 并且我的 owl carousel 版本是@version 2.0.0

希望这件事对你有帮助:)

score 2 · Accepted Answer

如果您使用 v1.3.3，则使用以下属性

autoPlay : 5000

或使用最新版本，然后使用以下属性

autoPlay : true

score 1 · Accepted Answer

Owl Carousel 版本很重要，截至目前（2020 年 8 月 2 日），该版本是2.3.4，自动播放的正确选项是：

$(".owl-carousel").owlCarousel({
    autoplay : true,
    autoplayTimeout: 3000,//Autoplay interval timeout.
    loop:true,//Infinity loop. Duplicate last and first items to get loop illusion.
    items:1 //The number of items you want to see on the screen.
});

阅读更多猫头鹰配置

score 1 · Accepted Answer

1

设置autoPlay: true对我不起作用。但是在设置autoPlay: 5000时它起作用了。

于 2018-07-28T11:51:17.503 回答

score 0 · Accepted Answer

我遇到了同样的问题，找不到解决方案。最后我意识到，与 owlcarousel 版本。2.3.4 我不仅要包含owl.carousel.js，还要包含owl.autoplay.js 文件。

score 0 · Accepted Answer

首先，您需要调用owl.autoplay.js。
这段代码对我有用：owl.trigger('play.owl.autoplay',[1000]);

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

15 回答 15

Related

Reference