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后，轮播自动播放是否仍然暂停（如果鼠标悬停在某些元素上）？

Answer 1

我很确定您的问题是您没有使用Owl Carousel 2.0测试版的最新版本。因此，你面对一些旧的错误;您当前工作的运行演示会有所帮助。

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

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

暂停旋转木马悬停的单独元素（猫头鹰Beta 2）

1 个答案: