2

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

这是标记：

<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？

4

1 回答 1

1

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

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

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

于 2014-08-18T20:56:27.600 回答