Owl Carousel Automatique De La Hauteur De Recalcul

Im essayant de créer un formulaire à l'aide de l'assistant de owl carousel. J'ai quelques conditionnel du javascript pour voir ce que les éléments de formulaire d'obtenir certaines entrées.

Par exemple, j'ai un certain nombre de boîtes qui ont des réponses oui ou non et selon celui que vous choisissez, il sera afficher ou masquer les autres boîtes. Voici un exemple de ce que je suis en train de faire.

http://jsfiddle.net/eju2uw20/1/

Voici le code que j'utilise pour la Owl Carousel.

$('.consultationSlider').owlCarousel({

    singleItem:true,
    mouseDrag: true,
    touchDrag: false,
    navigation : false,
    pagination : false,
    autoHeight: true,
    slideSpeed: 800

});

Si vous cliquez sur le bouton "suivant", vous pourrez voir le autoheight de travail. Toutefois, lorsque vous cliquez sur le "s'il vous plaît choisissez" sélectionner la zone et cliquez sur "non", vous verrez une autre boîte de sélection apparaît.

Comment puis-je faire en sorte que owl carousel recalcule la hauteur pour compenser les éléments ajoutés?

OriginalL'auteur YeahMKD | 2014-10-24

  1. 1

    Démo: http://jsfiddle.net/g23aqagv/

    $(document).ready(function() {

setInterval(function(){
 $(".owl-carousel").each(function(){
    $(this).data('owlCarousel').updateVars();
 });
},1500);

});

    Raccourcir le temps de la mise à jour, mais pas trop court. Cela fonctionne dans la version stable 1 version de Owl Carousel, je ne sais pas à propos de Owl2.

    Dans votre situation, vous pouvez effectuer les opérations suivantes (par @YeahMKD):

    $('.websiteDeveloped').change(function(){
    if ($(this).val() == 'no'){
        $('.completitionDate').show();
        $('.consultationSlider').data('owlCarousel').updateVars();
    } else if ($(this).val() == 'yes'){
        $('.completitionDate').hide();
        $('.consultationSlider').data('owlCarousel').updateVars();
    }
});
    Cette solution fonctionne très bien. J'ai modifié un peu le code de sorte qu'il n'était pas sur l'intervalle défini. J'ai remarqué qu'il était à l'origine un drôle de clignotant d'animation. Je pense que cela fonctionne très bien ainsi. Mauvais modifier votre réponse avec la mise à jour du code
    Je ne l'approuve pas le modifier parce que les autres qui veulent mettre à jour les diapositives peuvent trouver de l'approche générale que plus utile, car il n'est pas spécifique. J'ai ajouté votre js à l'original de la réplique.

    OriginalL'auteur Christina

  2. 3

    L'autre réponse met à jour le code toutes les quelques secondes à l'aide d'un intervalle qui va augmenter la charge et n'est pas une solution propre.
    Cette solution est beaucoup plus propre pas besoin de code supplémentaire et n'utilise que la fonction lorsque nécessaire...

    setInterval(function () {
  $(".owl-carousel").each(function () {
    $(this).data('owlCarousel').autoHeight();
  });
});
    Yep, je suis d'accord. Ce doit être la accepté de répondre. La réponse ci-dessus n'est pas une solution propre à tous.

    OriginalL'auteur MiniWasp

  3. 1

    Owl carousel fournit de la documentation sur la manipulation de contenu au sein d'un curseur être intéressant de regarder.

    http://owlgraphic.com/owlcarousel/demos/manipulations.html

    Vous devez reconstruire le curseur de la sélection est cochée et une nouvelle boîte de sélection est ajoutée.

    OriginalL'auteur Bobadevv

  4. 0

    supprimer propriété de cette prperty autoHeight:true, à partir de chouette initilization

    OriginalL'auteur Tamilselvan K