web-dev-qa-db-ja.com

フクロウカルーセル2.0を再初期化する方法？

フクロウカルーセルの最初のバージョンでは、次のようにします。

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

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

javascriptjqueryhtml5css3owl-carousel
11
gauvain robert

何らかの理由で$（ '＃your_carousel'）。trigger（ 'destroy.owl.carousel'）が正しく機能していません。プラグインを再度再起動するために必要なすべてのクラスが削除されるわけではありません。

「フクロウカルーセル2」を破壊するには、それらを完全に削除する必要があります。 githubのこの問題でここで説明されているように： https://github.com/smashingboxes/OwlCarousel2/issues/46

Owl関数を破壊するには：

$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();

これは私にとって完璧に機能しました：

// find element
$owl = $('body').find('#your_carousel');

// set the owl-carousel otions
var carousel_Settings = {
  touchDrag: false,
  mouseDrag: false
};

function initialize(){
  var containerWidth = $('body').find('.navbar').outerWidth();
  if(containerWidth <= 767) {
    // initialize owl-carousel if window screensize is less the 767px
    $owl.owlCarousel( carousel_Settings );
  } else {
    // destroy owl-carousel and remove all depending classes if window screensize is bigger then 767px
    $owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
    $owl.find('.owl-stage-outer').children().unwrap();
  }
}

// initilize after window resize
var id;
$(window).resize( function() {
  clearTimeout(id);
  id = setTimeout(initialize, 500);
});

// initilize onload
initialize();
18
Daniel

destroyでそれを行うことができますが、最新の develop branch を使用する必要があります。

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

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

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

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

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（）で

4
Макаров Алексей

今、あなたはそれをそのように破壊することができます：

var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed
4
Sergey Tyupaev

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

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

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

お役に立てば幸いです！

2
Francis

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();

それは私のために働いています。

0
Vitlii Yakymenko