jQuery WooThemes - Flexslider：flex 视口的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18043243/
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
WooThemes - Flexslider: Height of flex-viewport
提问by Torben
I installed the flexslider from woothemes on my webpage and the <div class="flex-viewport"is added to the site automatically via the jquery.flexslider.json line 621.
我在我的网页上安装了来自 woothemes 的 flexslider，并<div class="flex-viewport"通过jquery.flexslider.js在线 621自动添加到站点。
I have to adjust the height to a fixed value of 790px but the height is somehow calculated. I'm looking for the line in flexslider.js where the height is added to .flex-viewport. Does somebody know how I can add a fixed height here?
我必须将高度调整为 790px 的固定值，但以某种方式计算了高度。我正在 flexslider.js 中寻找将高度添加到.flex-viewport. 有人知道我如何在这里添加固定高度吗？
Thanks.
谢谢。
Code:
代码：
<div id="slider" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 710px; ">
<ul class="slides" style="width: 1200%; -webkit-transition: 0.6s; -webkit-transform: translate3d(-4900px, 0px, 0px); ">
回答by cavaliercyber
Basically flexslider doesn't have a feature for fixed height according to its document. But I found some code to solve this problem here in the official repositoryby calculating the tallest height to supply the height of slide.
根据其文档，基本上 flexslider 没有固定高度的功能。但是我在官方存储库中找到了一些代码来解决这个问题，通过计算最高高度来提供幻灯片的高度。
$(document).ready(function() {
fixFlexsliderHeight();
});
$(window).load(function() {
fixFlexsliderHeight();
});
$(window).resize(function() {
fixFlexsliderHeight();
});
function fixFlexsliderHeight() {
// Set fixed height based on the tallest slide
$('.flexslider').each(function(){
var sliderHeight = 0;
$(this).find('.slides > li').each(function(){
slideHeight = $(this).height();
if (sliderHeight < slideHeight) {
sliderHeight = slideHeight;
}
});
$(this).find('ul.slides').css({'height' : sliderHeight});
});
}
回答by seysane
$(document).on('click', '.flex-next, .flex-prev', function () {
$('#slider .flex-viewport').animate({ height: $('.flex-active-slide img').height() }, 'fast');
});
回答by BinJit
Just overwrite the height via css. & don't forget to put "!important".
只需通过 css 覆盖高度。＆不要忘记输入“！重要”。
#slider .flex-viewport{height:790px!important;}
