3

woothemes の flexslider を Web ページにインストールすると、オンライン 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); ">
4

3 に答える 3

7

基本的に 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});
    });
}
于 2013-08-04T14:22:16.440 に答える
0 
$(document).on('click', '.flex-next, .flex-prev', function () {

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

});
于 2016-11-11T00:35:48.460 に答える
-1

CSSで高さを上書きするだけです。& "!important" を忘れずに。

#slider .flex-viewport{height:790px!important;}
于 2015-11-19T06:44:23.023 に答える