19

Flexslider を使用して、さまざまなサイズの製品画像を A​​PI から取得しています。私はそれらを Flexslider の に放り込ん<ul>でいますが、これらのさまざまな画像サイズはうまく再生されません。画像の高さが異なる場合、Flexslider は適切にアニメーション化されますが、レイアウトに収まるように Flexslider の高さと幅を固定したいと考えています。全体を固定サイズに入れてみました<div>が、Flexslider はそれを完全に無視し、残りのレイアウトにオーバーフローします。Flexslider のサイズが変更されないように画像のサイズを変更する方法はありますか?

4

5 に答える 5

37

200px x 200px の固定サイズが必要だとしましょう。これらのプロパティを flexslider.css ファイルの次のセレクターに追加すると、準備完了です。

.flexslider {
    width: 200px;
    height: 200px;
}

.flexslider .slides img {
    width: 200px;
    height: 200px;
}

お役に立てれば！

于 2012-11-02T21:51:25.030 に答える
5

クラス「.flex-viewport」を持つ要素はスライドのコンテナであり、その要素はセット内のより高い画像に高さを調整します。トリックは、現在のスライドにあるものを除いて、すべての画像の高さを 0 に設定します。スライドが位置を交換するときにflexsliderスクリプトがトグルするクラス「.flex-active-slide」を持つli要素内にあります。このトリックの唯一の悪い点は、新しいスライドが新しい位置に配置された後にクラスのトグルが発生することですその後、スタッターが発生しますが、スライドの変更をトリガーする同じイベントにいくつかのtoggleClassをバインドするjavascriptを使用して対処できます。

.flex-viewport  li:not(.flex-active-slide) img{ 

height: 0 !important;
}
于 2014-04-12T05:07:35.473 に答える
0

以下のように、特定の div のスタイル オプションでサイズを設定します。異なるサイズの 2 つのスライダーがあります。

<div class="flexcontainer">
    <div id="first-slider" class="flexslider" style:"width:100px">
        <ul class="slides">
        ...
        </ul>
    </div> 
    <div id="second-slider" class="flexslider" style:"width:200px">
        <ul class="slides">
        ...
        </ul>
    </div> 
</div>
于 2013-03-24T23:26:59.793 に答える