Comment réactiver un carrousel de hibou 2.0?
Je sais que dans la première version du carrousel de hibou, nous le faisons comme ceci:
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.reinit({touchDrag: false, mouseDrag: false;});
D'accord, mais comment nous le faisons dans la deuxième version, je ne sais pas comment ils l'ont renommé.
Pour certaines raisons $ ('# your_carousel'). Trigger ('destroy.owl.carousel') ne fonctionne pas correctement. il ne supprime pas toutes les classes nécessaires pour réactiver le plugin.
Vous devrez les supprimer complètement pour détruire le "carrousel de hibou 2". comme décrit ici dans ce numéro sur github: https://github.com/smashingboxes/OwlCarousel2/issues/46
Pour détruire la fonction chouette, utilisez:
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
Cela a fonctionné parfaitement 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();
Vous pouvez le faire avec destroy
mais vous devez utiliser la dernière develop
branch :
$('#carousel').owlCarousel('destroy');
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Ou avec un accès direct au plugin:
$('#carousel').data('owl.carousel').destroy();
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Cela fonctionne définitivement:
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);
}
dans Owl.prototype.destroy = function ()
Maintenant, vous pouvez le détruire comme ça:
var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed
Je ne suis pas sûr, avez-vous essayé le remplacement?
Selon la documentation OwlCarousel, répertoriée ici http://www.owlcarousel.owlgraphic.com/docs/api-events.html , l'événement à déclencher est " replace.owl.carousel ". Vous pouvez l'implémenter comme ceci:
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.trigger('replace.owl.carousel', [{touchDrag: false, mouseDrag: false;}]);
J'espère que cela pourra aider!
Si j'utilise v1.3 je fais ensuite
$('#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 du travail pour moi.