web-dev-qa-db-ja.com

Flexsliderの固定サイズ

Flexsliderを使用して、APIからさまざまなサイズの製品イメージを取得しています。 Flexsliderの<ul>にそれらを投げてきましたが、これらのさまざまな画像サイズはうまく再生されません。画像の高さが異なる場合にFlexsliderはうまくアニメーションしますが、Flexsliderに固定された高さと幅をレイアウトに合わせたいと思います。全体を固定サイズ<div>に入れようとしましたが、Flexsliderはそれを完全に無視し、残りのレイアウトにオーバーフローします。 Flexsliderのサイズが変更されないように、画像をサイズ変更する方法はありますか？

javascripthtmlcssflexslider
19
Shawn Walton

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

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

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

お役に立てれば！

36
Parker Young

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

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

height: 0 !important;
}
4
Lu32

スクリプトを使用して幅を変更すると、幅は400になります

$('.flex_up').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 400,
    itemMargin: 5,
});
3
Aarthy Palanivelu

削除する

smoothHeight: true,

から

 jQuery('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            prevText: "",           
                    nextText: "",
            slideshow: false,
                    smoothHeight: true,
                    animateHeight: false,
            sync: "#carousel",
            start: function(){
                 jQuery('#slider ul.slides img').show(); 
            },
          });
1
Waqas Bukhary

以下のように、特定の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>
0
Gianluca Lodigiani