Owl Carousel不会自动播放

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-plugin代码将变量定义为"autoPlay".

Answer 2

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

autoPlay is for 1st version

autoplay is for 2nd version

Answer 3

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

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

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

Answer 6

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

只是一个打字错误，

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