Question

我正在开展一个项目，我想在这个旋转木马部分启动owl carousel 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

Answer 1

所以，你需要以下内容。

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

<强> - Demo -

请查看doc，因为您使用旧版本/使用不存在的参数。

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

1 个答案: