猫头鹰旋转木马2开始自动播放时，部分可见

owl carousel 2 start autoplay when the section visible

本文关键字：旋转木马 开始 自动播放 猫头鹰      更新时间：2023-09-26

我正在做一个项目，我想启动猫头鹰旋转木马2的自动运行功能，当我将在那个旋转木马部分。正常情况下，自动播放不会运行，当我向下滚动并悬停在部分上时，自动播放将开始。参见代码——

HTML: 

<div class="header">
    <h1>this is heading section</h1>
</div>
<div class="section">
    <h1>This is section</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    <div class="owl-carousel">
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
        <div><img src="http://placehold.it/550x450"/></div>
    </div>   
</div>

JS: 

var owl = $('.owl-carousel');
owl.owlCarousel({
    items: 1,
    center: false,
    loop: true,
    autoplay: false,
    autoplayTimeout: 1000,
    smartSpeed:1000,
    autoplayHoverPause: true
});
$('.section').mouseover(function(e) {
    owl.trigger('play.owl.autoplay', [1000]);
})

看我使用鼠标悬停功能来激活功能，我的意思是当我鼠标悬停在部分的自动播放需要运行，但它不工作…请帮帮我……

JSFIDDLE DEMO PROJECT HERE

那么，您需要以下内容:

var owl = $('.owl-carousel');
owl.owlCarousel({
    items: 1,
    loop: true
});
$('.section').on("mouseenter", function(e) {
    owl.trigger('owl.play', 1000);
    //Not owl.trigger('play.owl.autoplay', [1000]);
})

演示-

请查看文档，因为您使用的要么是旧版本，要么是使用了不存在的参数。

相关文章：