jquery - WooThemes - Flexslider：flex-viewport 的高度

Question

我在我的网页上安装了来自 woothemes 的 flexslider，并通过在线 621<div class="flex-viewport"自动添加到站点。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

根据其文档，基本上 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});
    });
}

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;}