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 ベータ版を使用していないことにあると確信しています。したがって、いくつかの古いバグに直面しています。現在の作業の実行中のデモが役立ちます。

このデモをチェックアウトすると、期待どおりに動作することがわかります: http://jsbin.com/novakalicovo/1/edit。Run with JSrawgit.com からのリソースがすぐにロードされない場合があるため、ボタンを数回使用する必要がある場合があります。

2 番目の質問に関しては、リンクの上にマウス ポインターを置いたままにしておく限り、これは機能します。そうしないと、ハンドラーmouseleaveが自動再生を再トリガーします。

于 2014-08-18T20:56:27.600 に答える