WooThemes -柔性滑块:柔性视口的高度

Question

我在我的网页上安装了woothemes的flexslider，<div class="flex-viewport"会通过621行的jquery.flexslider.js自动添加到站点中。

我必须将高度调整为790px的固定值，但高度是以某种方式计算出来的。我正在寻找flexslider.js中将高度添加到.flex-viewport的那一行。有没有人知道如何在这里添加一个固定的高度？

谢谢。

代码：

<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); ">

Answer 1

基本上，根据它的document，flexslider没有固定高度的功能。但是我找到了一些代码来解决这个问题，here in the official repository通过计算最高的高度来提供滑动的高度。

$(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});
    });
}

Answer 2

$(document).on('click', '.flex-next, .flex-prev', function () {

    $('#slider .flex-viewport').animate({ height: $('.flex-active-slide img').height() }, 'fast');

});

Answer 3

只需通过css覆盖高度即可。不要忘记输入"!important“。

#slider .flex-viewport{height:790px!important;}