web-dev-qa-db-fra.com

Comment restituer un élément de carrousel de hibou?

Eh bien, j'utilise un plugin owl-carousel-2 maintenant.

Et je rencontre le problème suivant:

Le code de balisage:

<div class="owl-carousel" style="display: none;">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <!-- ... -->
    <div class="item"><img src="..." /></div>
</div>

<script>
$(function() {
    var $owl = $('.owl-carousel');
    $owl.owlCarousel();

    // Doing many things here.

    $owl.show();
});
</script>

Le problème est:

Lorsque j'initialise avec l'instruction $owl.owlCarousel();, qui sous un état caché, sa taille n'est pas initialisée.

Donc, quand je montre ce contrôle, le contrôle s'affiche dans un désordre!

Mais lorsque je redimensionne la fenêtre, elle semble déclencher un nouveau rendu. Le contrôle affiche le contenu, puis s'affiche correctement.

Je me demande donc s'il existe un moyen de déclencher cette méthode de re-rendu (ou d'actualisation) dessus.

Afin de vous assurer que le contrôle ne s'affichera pas dans un désordre.

J'ai essayé de lire les documents et les sources, mais je n'ai pas encore de bonne solution.

Veuillez aider.

jqueryhtmlcssowl-carouselowl-carousel-2
10
Alfred Huang

J'ai découvert une solution laide et sale. Quoi qu'il en soit, cela a fonctionné:

Procédure principale:

  1. Détruisez ce carrousel de hiboux.
  2. Modifiez manuellement le balisage à l'état initial.
  3. Initialisez le carrousel de chouette.
var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory, the markup is still not the same with the initial.
// The differences are:
//   1. The initial content was wrapped by a 'div.owl-stage-outer';
//   2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
//   We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
    // your initial option here, again.
});

Cela a fonctionné, mais d'une manière si sale. Espérant voir une meilleure solution, soignée.

36
Alfred Huang

Cela fonctionne pour moi:

// get owl element
var owl = $('.owl-carousel');

// get owl instance from element
var owlInstance = owl.data('owlCarousel');

// if instance is existing
if(owlInstance != null)
    owlInstance.reinit();

Plus d'informations: http://owlgraphic.com/owlcarousel/demos/manipulations.html

13
mstuercke

Ran dans le même problème avec OP. J'arrive à le faire fonctionner en supprimant d'abord le owl-loaded classe. Ensuite, lors du rendu, déclenchez un événement d'actualisation après avoir rajouté la classe.

// Remove the owl-loaded class after initialisation 
$owl.owlCarousel().removeClass('owl-loaded');

// Show the carousel and trigger refresh
$owl.show(function(), {
  $(this).addClass('owl-loaded').trigger('refresh.owl.carousel');
})
5
J_Y

Voici ma solution, basée sur la solution de contournement intelligente de fish_ball:

if($('.owl-carousel').hasClass('owl-theme')){ //resize event was triggering an error, this if statement is to go around it

            $('.owl-carousel').trigger('destroy.owl.carousel'); //these 3 lines kill the owl, and returns the markup to the initial state
            $('.owl-carousel').find('.owl-stage-outer').children().unwrap();
            $('.owl-carousel').removeClass("owl-center owl-loaded owl-text-select-on");

            $(".owl-carousel").owlCarousel(); //re-initialise the owl
        }
5
Cuddlehead

Avec Owl Carousel 2, vous réinitialisez comme suit:

jQuery('.owl-carousel').trigger('refresh.owl.carousel');

voir ce problème .

3
ummdorian

Quant à 2.0.0-beta.2.4, cela fonctionne pour moi:

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}
3
Ruslan Belziuk

Avez-vous lu la documentation du plugin que vous utilisez, car le carrousel de hibou a une méthode de rafraîchissement lorsque vous souhaitez mettre à jour le carrousel.

refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

Le les documents sont ici pour événements

1
atmd