10

woothemeのFlexsliderを自分のサイトに統合しようとしましたが、ロード中を除いて見た目も機能も優れています。

スライダーでページを更新すると、フレックススライダーが読み込まれる前（約1秒）に、最初のスライドが非常に大きく表示され、黒く点滅してから消え、カルーセルが表示されます。

画像はjqueryよりも速く読み込まれていると思いますか？jqueryが読み込まれるまで画像を非表示にするにはどうすればよいですか（デモWebサイトのように、30億回更新しても、問題がWebサイトで繰り返されることはなく、すべて正常に読み込まれます！-http: //flexslider.woothemes.com/carousel -min-max.html）

jqueryの直後にflexlisder.jsをロードし、デモから同じhtmlコードをコピーしました（ロードされた.cssファイルと一致させるためです。使用しているinitコードは次のとおりです-デモサイトからも：

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});
4

6 に答える 6

22

使用しているプラ​​グインのコールバック関数を処理する必要があります。たとえば、クラスを使用して、CSSからすべての画像を非表示にします。flexImages 

$(document).ready(function() {

  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4, 
    start: function(){
         $('.flexImages').show(); 
    },
  });
});
于 2013-02-01T22:04:16.753 に答える
6

「表示」のデフォルトスタイルを「なし」に設定します。show（）を使用すると、このスタイル値が変更されます。

于 2013-02-01T22:01:29.230 に答える
1

また、スライドが読み込まれる前に点滅し、リストアイテムの箇条書きとともにページに積み上げられて表示されることもわかりました。

ほんの一瞬。その後、それはうまくいきました。壊れたnavimgリンクを表示するナビゲーションをすでにオフにしていたため、flexslider.cssファイルが含まれていないことに気づきませんでした。

CSSを含めることを忘れないでください！

于 2013-12-03T18:01:54.620 に答える
1

…私は同じ問題を抱えていました。上記のjsソリューションを試しましたが、うまくいきましたが、何らかの理由でjsが無効になっていると、何も表示されないことに気づきました。そこで、js以外のソリューションを探すことにしました。

私は特定のスライダーのためにそのようなものを置くだけです：

.MySlider {
  .flexslider .slides img { 
  max-height: 400px; 
  width: 940px;
 }
}

うまく機能し、応答性もありました。それがお役に立てば幸いです！

于 2015-04-21T17:03:18.380 に答える
0

flexslider.cssを含めるのを忘れたときに、同様の問題が発生しました

于 2013-05-29T15:12:47.167 に答える
0

スライダーを含むdivのCSSを設定しました：overflow：hidden; height：使用する画像の高さ。完璧に機能します。

更新：スライダーがサイズを変更するため、これはレスポンシブソリューションではありません...どうすればよいですか？

于 2014-03-18T16:42:01.440 に答える