javascript - 在悬停单独的元素时暂停轮播 (Owl Beta 2)

Question

我已经创建了一个完全位于轮播之外的单独导航，但我在自动播放方面遇到了一些问题。

这是标记:

<div class="carousel">
    <div class="">
        <img src="assets/img/carousel1.jpg" />
    </div>
    <div class="">
        <img src="assets/img/carousel2.jpg" />
    </div>
    <div class="">
        <img src="assets/img/carousel3.jpg" />
    </div>
    <div class="">
        <img src="assets/img/carousel4.jpg" />
    </div>
</div>

<div class="carousel_selector">
    <a href="" data-to="0">0</a>
</div>
<div class="carousel__selector">
    <a href="" data-t="1">1</a>
</div>
<div class="carousel_selector">
    <a href="" data-to="2">3</a>
</div>
<div class="carousel_selector">
    <a href="" data-to="3">4</a>
</div>

这是 Javascript:

var carousel = $(".carousel");

carousel.owlCarousel({
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 500,
    items: 1,
    loop: true
});

$('.carousel_selector a').on('mouseover', function (e){
    carousel.trigger('stop.owl.autoplay');
});

$('.carousel_selector a').on('mouseleave', function (e){
    carousel.trigger('play.owl.autoplay');
});

$('.carousel_selector a').on('click', function (e){
    e.preventDefault();
    var slideTo = $(this).data('to');
    carousel.trigger('to.owl.carousel', [slideTo]);
    carousel.trigger('stop.owl.autoplay');
});

.on('mouseover', ... 和 .on('mouseleave', ... 按预期调用，但轮播仅有时暂停.我看不到它暂停时的​​任何模式。

.on('click', ... 工作得很好，除了自动播放暂停时，它会立即恢复。我尝试添加一个调用以在导航，但没有任何区别。

我的问题是:

1) 当鼠标悬停在某些元素上时，如何始终暂停轮播？

2) 即使在触发 to.owl.carousel 之后，carousel autoplay 能否保持暂停状态(前提是鼠标悬停在某些元素上)？

Answer 1

我很确定您的问题是您没有使用最新开发的 Owl Carousel 2.0 beta。因此，您面临一些旧错误；您当前工作的运行演示会很有帮助。

查看此演示，您会发现它按预期工作:http://jsbin.com/novakalicovo/1/edit .可能需要多次使用 Run with JS 按钮，因为有时不会立即加载来自 rawgit.com 的资源。

关于你的第二个问题，只要你将鼠标指针停留在链接上，这就有效，否则你的处理程序 mouseleave 会重新触发自动播放。