javascript - フクロウのカルーセル 2.0 を再起動するには?

Question

フクロウカルーセルの最初のバージョンでは、次のようにしていることを私は知っています:

var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel'); 
owl.reinit({touchDrag: false, mouseDrag: false;});

わかりましたが、2 番目のバージョンでどのように行うのか、名前がどのように変更されたのかわかりません。

Answer 1

あなたはそれを行うことができdestroyますが、最新のdevelopブランチを使用する必要があります:

$('#carousel').owlCarousel('destroy'); 
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});

または、プラグインに直接アクセスする場合:

$('#carousel').data('owl.carousel').destroy(); 
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});

Answer 2

これは間違いなく機能します：

if (container.hasClass("owl-carousel")) {
    container.owlCarousel({
        touchDrag: false,
        mouseDrag: false
    });
    container.data('owlCarousel').destroy();
    container.removeClass('owl-carousel owl-loaded');
    container.find('.owl-stage-outer').children().unwrap();
    container.removeData();
}

そしてプラグイン自体：

if (this.settings.responsive !== false) {
                window.clearTimeout(this.resizeTimer);
                $(window).off('resize.owl.carousel');
                this.off(window, 'resize', this.e.onThrottledResize);
            }

Owl.prototype.destroy = function() で

Answer 3

よくわかりませんが、交換を試しましたか？

http://www.owlcarousel.owlgraphic.com/docs/api-events.htmlにリストされている OwlCarousel のドキュメントによると、トリガーするイベントは「replace.owl.carousel」です。次のように実装できます。

var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel'); 
owl.trigger('replace.owl.carousel', [{touchDrag: false, mouseDrag: false;}]);

それが役立つことを願っています!

Answer 4

v1.3を使うなら次に作る

$('#OwlWrapper').owlCarousel({option...});
$('#OwlWrapper').append('<div><img class="img-fluid" src="demo_files/images/1200x800/5-min.jpg" alt=""></div>');
$('#OwlWrapper').data('owlCarousel').reinit();

それは私のための仕事です。

Answer 5

Owl Carousel v2.3.4バージョンの場合、

// Slider element.
let sliderElement = $('#msg-slider');

// Destroy first.
sliderElement.trigger('destroy.owl.carousel');

// Then empty whole owl div.
sliderElement.empty();

// Re-init owl slider.
sliderElement
    .owlCarousel({
        loop:true,
        margin:0,
        nav:false,
        dots:true,
        responsive:{
            0: {
                items: 1
            },
            600: {
                items:1
            },
            1000: {
                items:1
            }
        }
});

うまくいけば、これは誰かを助けるでしょう。ありがとう。