Comment faire pour réinitialiser un owl carousel 2.0?

Je sais que dans la première version de owl carousel nous de faire comme ceci :

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

Ok, mais comment nous le faisons dans la deuxième version, je ne sais pas comment ils ont rebaptisé.

Qu'entendez-vous par ? BTW, avez-vous vérifier les docs de la nouvelle version??
Même quand il ne. Les docs sont dépassées actuellement car je n'ai pas le temps de mettre à jour actuellement.

OriginalL'auteur gauvain robert | 2014-08-16

  1. 17

    Pour certaines raisons $('#your_carousel').trigger('détruire.owl.carousel) ne fonctionne pas correctement. il ne supprime pas toutes les classes qui sont nécessaires pour réinitialiser le plugin nouveau.

    Vous devrez les supprimer complètement de détruire les "owl carousel 2". comme décrit ici dans ce numéro sur github: https://github.com/smashingboxes/OwlCarousel2/issues/460

    De détruire la chouette fonction de l'utilisation:

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

    Cela a fonctionné parfait pour moi:

    //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();
    Pas De Travail @Daniel

    OriginalL'auteur Daniel

  2. 7

    Vous pouvez le faire avec destroy mais vous devez utiliser les dernières développer de la branche:

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

    Ou avec accès direct à la plugin:

    $('#carousel').data('owl.carousel').destroy(); 
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
    Fonctionne très bien pour moi. Merci beaucoup.

    OriginalL'auteur witrin

  3. 4

    Ce definitely works:

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

    Et le plugin lui-même:

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

    en Owl.le prototype.détruire = function()

    OriginalL'auteur Макаров Алексей

  4. 3

    Maintenant, vous pouvez le détruire comme ça:

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

    OriginalL'auteur Sergey Tyupaev

  5. 2

    Je ne suis pas sûr, avez-vous essayé de le remplacer?

    Que par la OwlCarousel documentation, énumérées ici http://www.owlcarousel.owlgraphic.com/docs/api-events.html, l'événement déclencheur est "remplacer.owl.carrousel". Vous pouvez la mettre en œuvre comme ceci :

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

    Espère que ça aide!

    Merci pour l'astuce @witrin !
    L'url est en bas, mais j'ai trouvé celui-là: htmlpreview.github.io/?https://github.com/OwlFonk/OwlCarousel/... il y a également une fonction appelée chouette.reinit(...) qui pourraient être d'intérêt
    Comme de 2017-08-24 l'autre lien ne fonctionne pas non plus.

    OriginalL'auteur Francis

  6. -1

    Si l'utilisation v1.3-je faire la prochaine 

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

    C'est le travail pour moi.

    Bienvenue à Débordement de Pile! Vous avez répondu à une très vieille question. Assurez-vous que votre réponse est pertinente à la question et ajoute quelque chose que les autres réponses ne fournit pas. Vous devriez voir comment écrire une bonne réponse.

    OriginalL'auteur Vitlii Yakymenko