bxsliderが不適切なビューポートサイズを計算するとき

Question

最近、私は最近bxsliderの使用を開始しましたが、問題が発生しています。

それも（奇妙なことは、私は、ブラウザのウィンドウのサイズを変更する場合、ある

タブレットなど、それはモバイルデバイス上でうまく動作しないことを意味する、ページのロード時に誤ってそのビューポートのサイズを計算しているようですちょうどピクセルの場合）、ビューポートの高さが正しく計算され、すべてがうまく見えます。しかし、同じ高さと幅のページをリフレッシュすると、bx-viewportが正しく計算されません。

これはなぜ起こっているのですか？

HTMLは次のようになります（そして、ええ、私はまだそれはおそらくそれを行うには何も持っていないことを認識してんだけど、）：

slider=jQuery('.seminars-slider').bxSlider({ 
    mode: 'vertical', 
    controls:false, 
    pager:false, 
    minSlides:2, 
    maxSlides:2, 
    moveSlides:1 
}); 

jQuery('.up-control').click(function() { 
    slider.goToNextSlide(); 
}); 
jQuery('.down-control').click(function() { 
    slider.goToPrevSlide(); 
}); 

：

<ul class="seminars-slider"> 
    <li> 
     <article class="education-article"> 
      <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3> 
      <p>LOL1</p> 
      <div class="buttons"> 
       <a href="#" class="book-button"><span>Book now</span></a> 
       <a href="#" class="read-more"><span>Read more</span></a> 
      </div> 
      <div class="clearall"></div> 

     </article> 
    <div class="clearall"></div> 
    </li> 

    // same li 
    <li> 
     <article class="education-article"> 
      <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3> 
      <p>LOL1</p> 
      <div class="buttons"> 
       <a href="#" class="book-button"><span>Book now</span></a> 
       <a href="#" class="read-more"><span>Read more</span></a> 
      </div> 
      <div class="clearall"></div> 

     </article> 
    <div class="clearall"></div> 
    </li> 
</ul>   

jsの呼び出しは次のようになります

ありがとうございます。

Answer 1

bxSlider関数の呼び出しが早すぎる可能性があります。あなたは

$(document).ready(function() { ... });

からそれを呼び出している場合は代わりに

$(window).load(function() { ... });

の使用を検討DOMをすることが示されているまで、これら2つの関数を使用しての違いは、（ドキュメント）.ready待機していることですそのユーザは初期状態ですが、（window）.loadは実際にはすべてのリソースがDOMにロードされるまで待機します。

Answer 2

<ul>要素にajaxを読み込み、イメージが含まれている場合は、読み込み後にslider.reloadSlider();を試してください。

imagesLoaded('.seminars-slider', function() { 
    slider.reloadSlider(); 
}); 

（に可変名を変更：第一に、私はイメージがロードされるのを待つために

setTimeout('slider.reloadSlider()',1000); 

を使用したが、最終的に私は、負荷にイメージをお待ちしています素敵なライブラリ ImagesLoadedに切り替え

Answer 3

bxslider githubページの "romelmederos"が推奨されています。

---

「BxSlider v4.1の - 。私は、モバイル用の応答性のウェブサイトに高さのパーセンテージを使用しておりますので はスライダーのレンダリングに問題を持つ

だから私は変更 をしなければなりませんでしたfrom： slider.viewport.css（ 'height'、getViewportHeight（））; to this： slider.viewport。css（ 'height'、 ''）;

私はライン1290上で私のjquery.bxslider.jsを編集した私の代わりに私のコピーにオプションでプラグインを変更しますが、変更する最も簡単な方法は、

---

「上記の行を変更することであり、これは働いていました（スライダーがすべてロードされるまで、逮捕されたwindow.loadと。）、私のために素晴らしいとwindow.loadよりもよりよい解決策を思わ

Answer 4

あなたは

slider=jQuery('.seminars-slider').bxSlider({ 
    mode: 'vertical', 
    controls:false, 
    pager:false, 
    minSlides:2, 
    maxSlides:2, 
    moveSlides:1 
}); 
setTimeout(function(){ 
      slider.redrawSlider(); 
     },100); 

Answer 5

マシューWを使用することができますatsonは私に良いアイデアを与えたと私はプラグインに行き、実際のgetViewPortHeight（）関数のようにのように更新：だから

var getViewportHeight = function(){ 
    var height = 0; 
    children = slider.children; 
    height = jQuery(slider.children[0]).height();; 
    return height; 
} 

今ではそこに最初の画像の高さを取っている（うまくいけば、それらはすべて同じです...）を使用してスライダの高さを決定します。スライダの下にコントロールが表示されますが、これはCSSの配置などで修正できます。

これはいくつかの迷子に役立つことを願っています。

Answer 6

このサファリバグの解決策が見つかりました。スライダのモードを水平にしなければなりません（垂直の場合でも、フェードが全く機能しないかはわかりません）。次に、最初の画像の高さを取得し、それを ".bx-viewport"に渡す必要があります。ここに私のスクリプトの様子があります：

$("img.Banner").attr("id", "first-slide"); 
$('.bxslider').bxSlider({ 
    adaptiveHeight: true, 
    mode: 'horizontal', 
    auto: true 
    }); 
$("#first-slide").load(function(){ 
    var height = $(this).height(); 
    $(".bx-viewport").css("height", height); 
});