bxSLiderに画像が表示されません

Question

私はbxSliderを使用して、クライアントのウェブサイトのメインページのスライドを表示しています。それは偉大な作品と非常に素晴らしい機能は、私は文句を言うことはできませんので、フリー、スライドツールをパックです。

しかし、bxslideサイトでは、画像がロードされていないときにローディングペインが表示されます。イメージがロードされると、ロードされたイメージが表示されます。しかし、私のサイトでは、画像が読み込まれていない無負荷イメージがありません、あなたは十分なスペースを埋めるために、画像が読み込まれるまで、下の画像の中に見えるようにそれはちょうど自分自身に崩壊しています

そして、それだけで、突然の負荷と画像がロードされるのをお待ちしておりますと、この

は、なぜ私はそのスペースを埋めるロードのアイコンを取得していない午前のようなイメージがありますか？ここで私は現在、

slider = $('.bxslider').bxSlider({ 
    auto: true, 
    mode: 'fade', 
    pause: 10000, 
    speed: 2000, 
    pager: false, 
    useCSS: false 
}); 
slider.goToSlide(1); 

私のスライダーを呼び出すために使用していますjqueryのであり、あまりがあるので、スライダここ

<div class="slider"> 
    <ul class="bxslider"> 
     <li><a href="#"><img src="image.png" alt="Banner" /></a></li> 
    </ul> 
</div> 

そして最後のためのHTMLは、私のCSSのすべてとcodePenですSOに投稿する

http://codepen.io/anon/pen/aprBdK

Answer 1

あなたbxSlider初期化するオプションadaptiveHeightを追加します。

イメージがロードされていない場合、スライドショーのデフォルト設定は0です。適応型高さプロパティを含めると、スライドショーの高さは決して0になりません（ただし、 ）。

slider = $('.bxslider').bxSlider({ 
    auto: true, 
    adaptiveHeight: true, 
    mode: 'fade', 
    pause: 1000, 
    speed: 2000, 
    pager: false, 
    useCSS: false 
}); 
slider.goToSlide(1);