Сова Карусель Авто пересчет высоты

Question

Я пытаюсь создать мастер формы с использованием карусели совы. У меня есть некоторый условный javascript, который показывает, какие элементы формы получают определенные входы.

Например, у меня есть несколько полей выбора, у которых есть ответы «да» или «нет», и в зависимости от того, какой из них выбрать, он отобразит или спрячет другие поля выбора. Вот пример того, что я пытаюсь сделать.

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

Вот код, я использую для Owl Carousel.

$('.consultationSlider').owlCarousel({ 

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

}); 

Если вы нажмете на следующую кнопку, вы увидите, что работает автоматическое управление. Однако, когда вы нажмете на поле «пожалуйста, выберите» и нажмите «Нет», вы увидите окно выбора.

Как я могу сделать это так, чтобы карусель совы пересчитывала высоту, чтобы компенсировать добавленные элементы?

Answer 1

Демо: http://jsfiddle.net/g23aqagv/

$(document).ready(function() { 

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

}); 

Сократить время для обновления, но не слишком коротким. Это работает в стабильной версии 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 2

Сова-карусель обеспечивает документацию по управлению содержимым в слайдере, на которое стоит обратить внимание.

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

Вам придется восстановить ползунок, если выбрать помечена и новый выбор добавляется поле.

Answer 3

Другой ответ обновляет код через каждые несколько секунд, используя интервал, который увеличит нагрузку и не является чистым решением , Это решение намного чище, без необходимости использования дополнительного кода, и использует только функцию, когда это необходимо ...

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