javascript 猫头鹰旋转木马自动高度重新计算
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26542622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel Auto Height Recalculation
提问by YeahMKD
Im trying to create a form wizard using owl carousel. I have some conditional javascript running to see what form elements get certain inputs.
我正在尝试使用 owl carousel 创建一个表单向导。我有一些条件 javascript 正在运行以查看哪些表单元素获得某些输入。
For example, I have a number of select boxes that have yes or no answers and depending on which one you pick, it will show or hide other select boxes. Here is an example of what I am trying to do.
例如，我有许多选择框有是或否的答案，根据您选择的那个，它会显示或隐藏其他选择框。这是我正在尝试做的一个例子。
http://jsfiddle.net/eju2uw20/1/
http://jsfiddle.net/eju2uw20/1/
Here is the code I am using for the Owl Carousel.
这是我用于 Owl Carousel 的代码。
$('.consultationSlider').owlCarousel({
singleItem:true,
mouseDrag: true,
touchDrag: false,
navigation : false,
pagination : false,
autoHeight: true,
slideSpeed: 800
});
If you click on the next button, you will see the autoheight working. However, when you click on the "please choose" select box and click "no", you will see another select box appear.
如果单击下一步按钮，您将看到自动高度工作。但是，当您单击“请选择”选择框并单击“否”时，您将看到另一个选择框出现。
How can I make it so that owl carousel recalculates the height to make up for the added elements?
我怎样才能让猫头鹰旋转木马重新计算高度以弥补添加的元素？
采纳答案by Christina
Demo: http://jsfiddle.net/g23aqagv/
演示：http: //jsfiddle.net/g23aqagv/
$(document).ready(function() {
setInterval(function(){
$(".owl-carousel").each(function(){
$(this).data('owlCarousel').updateVars();
});
},1500);
});
Shorten the time for the update, but not too short.This works in the stable version 1 release of Owl Carousel, I don't know about Owl2.
缩短更新时间，但不要太短。这适用于 Owl Carousel 的稳定版本 1 版本，我不知道 Owl2。
In your situation, you can do the following (as per @YeahMKD):
在您的情况下，您可以执行以下操作（根据 @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();
}
});
回答by MiniWasp
The other answer updates the code every few seconds using an interval which will increase the load and is not a clean solution. This solution is much cleaner no need for extra code and only uses the function when needed...
另一个答案使用会增加负载的间隔每隔几秒钟更新一次代码，这不是一个干净的解决方案。这个解决方案更简洁，不需要额外的代码，只在需要时使用该功能......
setInterval(function () {
$(".owl-carousel").each(function () {
$(this).data('owlCarousel').autoHeight();
});
});
回答by Bobadevv
Owl carousel provides documentation on manipulating content within a slider be worth looking at.
Owl carousel 提供了有关在滑块中操作内容的文档，值得一看。
http://owlgraphic.com/owlcarousel/demos/manipulations.html
http://owlgraphic.com/owlcarousel/demos/manipulations.html
You will have to rebuild the slider if the select is ticked and a new select box is added.
如果选中了选择并添加了新的选择框，则必须重建滑块。
回答by Tamilselvan K
remove property this prperty autoHeight:true,from owl initilization
autoHeight:true,从 owl初始化中删除这个属性
