貓頭鷹旋轉木馬自動高度重新計算

Question

我正在嘗試使用owl carousel創建表單向導。 我有一些條件javascript運行，以查看哪些表單元素獲得某些輸入。

例如，我有許多選擇框，其中包含是或否答案，根據您選擇的答案，它將顯示或隱藏其他選擇框。 這是我想要做的一個例子。

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

這是我用於貓頭鷹旋轉木馬的代碼。

$('.consultationSlider').owlCarousel({

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

});

如果單擊下一步按鈕，您將看到自動高度正常工作。 但是，當您單擊“請選擇”選擇框並單擊“否”時，您將看到另一個選擇框出現。

我怎樣才能使貓頭鷹旋轉木馬重新計算高度以彌補添加的元素？

Answer 1

另一個答案是每隔幾秒使用一個間隔來更新代碼，這會增加負載並且不是一個干凈的解決方案。 這個解決方案更清潔，不需要額外的代碼，只在需要時才使用該功能......

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

Answer 2

Owl carousel提供有關操縱滑塊內容的文檔值得一看。

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

如果勾選了選擇並添加了新的選擇框，則必須重建滑塊。

Answer 3

演示： http ： //jsfiddle.net/g23aqagv/

$(document).ready(function() {

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

});

縮短更新時間，但不能太短。 這適用於貓頭鷹Carousel的穩定版本1發布，我不知道Owl2。

在您的情況下，您可以執行以下操作（根據@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();
    }
});

Answer 4

刪除屬性這個屬性autoHeight:true,來自owl initilization