单击导航箭头时如何停止猫头鹰轮播

Question

我有一个带有自动播放设置和导航箭头的简单 Owl 旋转木马，使用以下选项定义：

  var options = {
    mainBanner: {
        animateOut: 'fadeOut',
        autoplay: true,
        autoplayHoverPause: false,
        autoplaySpeed: 1200,
        dots: false,
        lazyLoad: true,
        loop: true,
        mouseDrag: false,
        pullDrag: false,
        touchDrag: false,
        nav: true,
        navText: [
            "‹",
            "›"
        ]
    },

…

当用户单击导航箭头时，我希望它停止自动播放。为此，我添加了以下功能：

 setTimeout(function () {
    $('.owl-nav > div').on('click', function () {
        $('.owl-carousel').trigger('stop.owl.autoplay');
    })
}, 500);

（我添加了超时，因为加载此函数时 .owl-nav 元素尚未呈现。它不是很优雅，但它达到了目的）。

问题是当我单击导航箭头时，自动播放停止。但是，如果我再次（一次又一次）单击它们，滑块将继续自动播放。这不是预期的行为 - 我只是希望它从第一次点击时停止。

非常感谢有关如何解决此问题的任何提示。谢谢！

原文由 Diana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从我 在这里 和 这里 收集到的信息来看，这似乎是一个计时器问题：触发 stop.owl.autoplay 会破坏计时器，但不会更改自动播放设置，因此会再次设置计时器。你必须在设置中关闭（如果你想重新激活则重新打开）。

你可以试试：

 $('.owl-nav > div').on('click', function () {
    $('.owl-carousel').trigger('stop.owl.autoplay');

    //simple one (EDIT: not enough to make it work after testing it):
    //$('.owl-carousel').trigger('changeOption.owl.carousel', { autoplay: false });

    //or more complicated (will work for one carousel only, or else use 'each'):
    //EDIT: this one seems to work
    var carousel = $('.owl-carousel').data('owl.carousel');
    carousel.settings.autoplay = false; //don't know if both are necessary
    carousel.options.autoplay = false;
    $('.owl-carousel').trigger('refresh.owl.carousel');
});

编辑：第二个解决方案似乎有效： https://jsfiddle.net/b6x6vc8q/3/

原文由 Kaddath 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为了停止 owl 自动播放，您可以触发相应的事件：

stop.owl.autoplay ：停止自动播放。

尽管：

play.owl.autoplay ：运行自动播放

片段：

 $('.owl-carousel').owlCarousel({
    animateOut: 'fadeOut',
    autoplay: true,
    autoplayHoverPause: false,
    autoplaySpeed: 10,
    dots: false,
    lazyLoad: true,
    loop: true,
    mouseDrag: false,
    pullDrag: false,
    touchDrag: false,
    nav: true,
    navText: [
        "‹",
        "›"
    ]
});
$('#btn1').on('click', function(e) {
    $('.owl-carousel').trigger('stop.owl.autoplay');
})
$('#btn2').on('click', function(e) {
    $('.owl-carousel').trigger('play.owl.autoplay');
})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
    <div><img src="https://dummyimage.com/300x200/000/fff&text=1"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=2"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=3"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=4"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=5"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=6"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=7"></div>
</div>
<button type="button" id="btn1">Stop owlCarousel</button>
<button type="button" id="btn2">Start owlCarousel</button>

原文由 gaetanoM 发布，翻译遵循 CC BY-SA 3.0 许可协议