单击导航箭头时如何停止 Owl Carousel

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 元素还没有呈现。它不是很优雅，但它达到了目的）。

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

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

Answer 1

为了停止 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>

Answer 2

从我在这里和这里收集的信息来看，这似乎是一个计时器问题：触发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/