Owl Carousel Auto Höhe Neuberechnung

Im Versuch, erstellen Sie ein Formular-Assistent mit Eule Karussell. Ich habe einige bedingte javascript ausführen, um zu sehen, welche form-Elemente bestimmte Eingänge.

Ich habe zum Beispiel eine Reihe von select-Boxen, die haben ja oder Nein Antworten und je nachdem, welche Sie wählen, wird es zeigen, oder verstecken Sie andere Felder auswählen. Hier ist ein Beispiel, was ich versuche zu tun.

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

Hier ist der code, den ich benutze für die Eule Karussell.

$('.consultationSlider').owlCarousel({

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

});

Wenn Sie auf die Schaltfläche weiter klicken, sehen Sie die autoheight arbeiten. Jedoch, wenn Sie klicken Sie auf die "wählen Sie bitte" select-Feld und klicken Sie auf "Nein", Sie werden sehen, ein weiteres select-Feld erscheinen.

Wie kann ich es so machen, dass owl Karussell neu berechnet die Höhe, um für die hinzugefügten Elemente?

InformationsquelleAutor YeahMKD | 2014-10-24

1

Demo: http://jsfiddle.net/g23aqagv/
```
$(document).ready(function() {

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

});
```
Verkürzung der Zeit für das update, aber nicht zu kurz. Dies funktioniert in der stable-version 1-Version von Owl Karussell, weiß ich nicht Owl2.

In Ihrer situation, können Sie Folgendes tun (wie pro @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();
    }
});
```
Diese Lösung funktioniert Super. Ich bearbeitet den code ein wenig, so dass es nicht auf den eingestellten Intervall. Ich bemerkte es verursacht eine seltsam blinkende animation. Ich denke, das funktioniert sehr gut als gut. Ill Bearbeiten Sie Ihre Antwort mit den aktualisierten code
Ich habe nicht genehmigen Bearbeiten, weil andere, die möchten, aktualisieren Sie die Folien finden kann der Allgemeine Ansatz mehr hilfreich, da es nicht spezifisch ist. Ich fügte hinzu, Ihre js der original-Antwort.

InformationsquelleAutor Christina
3

Die andere Antwort updates der Codes alle paar Sekunden mit einem Intervall, das erhöht die Last und nicht eine saubere Lösung.
Diese Lösung ist viel sauberer aus, keine Notwendigkeit für zusätzliche code und verwendet nur die Funktion wenn benötigt...
```
setInterval(function () {
  $(".owl-carousel").each(function () {
    $(this).data('owlCarousel').autoHeight();
  });
});
```
Yep, Stimme ich zu. Dies sollte die akzeptierte Antwort. Die Antwort oben ist keine saubere Lösung.

InformationsquelleAutor MiniWasp
1

Owl carousel bietet eine Dokumentation über die Bearbeitung von Inhalten innerhalb von ein Schieberegler sein, lohnt ein Blick auf.

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

Müssen Sie neu erstellen Sie die Schieberegler, wenn das auswählen, ein Häkchen gesetzt ist und eine neue select-box Hinzugefügt wird.

InformationsquelleAutor Bobadevv
0

entfernen Eigenschaft dieser prperty autoHeight:true, aus owl initilization

InformationsquelleAutor Tamilselvan K

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.