web-dev-qa-db-fra.com

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é.

javascriptjqueryhtml5css3owl-carousel
11
gauvain robert

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

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});
8
witrin

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

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

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

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

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!

2
Francis

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.

0
Vitlii Yakymenko