2

ユーザーが HTML の div を含むスライド間を行き来できる短いパワーポイント プレゼンテーションのように、ユーザーがチャンクでコンテンツを取得することになっているサイトを作成しています。

そのためには、カルーセルのようなプレゼンテーション ビューを使用するのがよいと考えました。Owl-carouselとそのコールバック パラメータを調べましafterMoveたが、移動の方向を取得する方法に関するドキュメントには何も表示されません。

つまり、ユーザーが左にドラッグするか、[次へ] ボタンをクリックするとn、ユーザーが右にドラッグするか、[前へ] ボタンをクリックすると、 function を呼び出したいと思いますp。これは可能ですか、それとも他のプラグインを調べる必要がありますか?

4

4 に答える 4

3

同じことをする必要がありましたが、次/前のクリックのみです（ドラッグは使用しません）。移動方向を取得する適切な方法が見つからなかったため、クリック関数をオーバーライドして有益なクラスを追加しました。

    $(".owl-next").click(function(){
      $('.owl-carousel').addClass('move-next');
    })

    $(".owl-prev").click(function(){
        $('.owl-carousel').addClass('move-prev');
    })

次に afterMove 関数で:

afterMove: function() {
    if( $('.owl-carousel').hasClass('move-next') ) {
          // Click next: your code
          $('.owl-carousel').removeClass('move-next');
    } else if ( $('.owl-carousel').hasClass('move-prev') ) {
          // Click prev: your code
          $('.owl-carousel').removeClass('move-prev');
    }
}

最善の方法ではないかもしれませんが、少なくとも欲しいものは手に入れることができます。

于 2014-07-22T12:54:42.470 に答える
2

プラグインのdragDirectionプロパティを使用する

于 2014-03-26T11:17:05.397 に答える
2

方向を取得するには、 relatedTarget の状態プロパティを使用します。

owl.on("drag.owl.carousel", function (event) {
    console.log(event.relatedTarget.state.direction);
});
于 2016-09-14T10:33:14.510 に答える
1

私はgithub.comで読んだ

/*****/

var owl = $('#your-carousel-selector').data('owlCarousel');

$(document.documentElement).keyup(function(event) {
    // handle cursor keys
    if (event.keyCode == 37) {
        owl.prev();
    } else if (event.keyCode == 39) {
        owl.next();
    }
});
于 2014-10-08T18:56:21.423 に答える