Question

我在我的网站上使用猫头鹰旋转木马。根据他们的文档，这段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>

Answer 1

是的，这是打字错误。

写

将autoPlay

不

自动播放

autoplay-plugin代码将变量定义为“autoPlay”。

Answer 2

你可能是错误的猫头鹰的doc版本。

autoPlay is for 1st version

autoplay is for 2nd version

Answer 3

单独将自动播放更改为自动播放对我不起作用。诀窍是添加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

Answer 4

添加此

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

Answer 5

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

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

Answer 6

此代码应该适合您

$("#intro").owlCarousel ({

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

Answer 7

在我的情况下自动播放无效但自动播放工作正常

我只用过这个

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

没有owl.autoplay.js需要它＆amp;我的猫头鹰旋转木马版本是 @version 2.0.0

希望这件事可以帮助你：）

Answer 8

只是打字错误，

<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>

Answer 9

你的Javascript应该是

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

// Most important owl features

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

Answer 10

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

Answer 11

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

autoPlay : 5000

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

autoPlay : true

Answer 12

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.
});

了解更多猫头鹰configurations

Answer 13

首先，您需要调用owl.autoplay.js。
此代码适用于我：owl.trigger（＆＃39; play.owl.autoplay＆＃39;，[1000]）;

Answer 14

在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
});

Answer 15

我遇到了同样的问题，无法找到解决方案。最终，我意识到，使用owlcarousel ver。 2.3.4我不仅必须包含owl.carousel.js，还必须包含owl.autoplay.js文件。

Owl Carousel赢得了自动播放

15 个答案: