web-dev-qa-db-ja.com

ロード時に誤ったビューポートサイズを計算するbxslider

とにかく、最近bxsliderの使用を開始しましたが、問題が発生しています。

ページの読み込み時にビューポートのサイズが誤って計算されるようです。つまり、モバイルデバイスやタブレットなどではうまく機能しません。

奇妙なことに、ブラウザーのウィンドウのサイズを変更すると（たとえピクセルの場合でも）、ビューポートの高さが正しく計算され、すべてが正常に見えます。しかし、同じ高さと幅でページを更新した場合、bx-viewportは正しく計算されません。

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

HTMLは次のようになります（そして、ええと、それはおそらくそれとは何の関係もないことは承知していますが、それでも）：

<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呼び出しは次のようになります。

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();
});

ありがとう。

jquerycssbxslider
17
Matija Milković

BxSlider関数の呼び出しが早すぎる可能性があります。から呼び出す場合

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

代わりに使用を検討

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

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

51
Fernando Lujan

使用できます

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

bxslider githubページの「romelmederos」が提案されました。

「BxSlider v4.1-モバイルのレスポンシブWebサイトで高さのパーセンテージを使用しているため、スライダーのレンダリングに問題があります。

だから私はから変更を加える必要がありました：slider.viewport.css（ 'height'、getViewportHeight（））;これに：slider.viewport.css（ 'height'、 ''）;

コピーの代わりにオプションを使用してプラグインを変更しましたが、変更する最も速い方法は、上の行を変更することです。 "

1290行目でjquery.bxslider.jsを編集しました。これは私にとってはうまくいき、window.loadよりも優れた解決策のようです（window.loadを使用すると、すべてが読み込まれるまでスライダーが無効化されていました）。

3
Matthew Watson

_<ul>_要素をajaxでロードしていて、画像が含まれている場合は、ロード後にslider.reloadSlider();を試してください。最初に使用した

_setTimeout('slider.reloadSlider()',1000);
_

画像が読み込まれるのを待つのですが、最終的には画像が読み込まれるのを待つニースライブラリ ImagesLoaded に切り替えました。

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

（質問の名前と一致するように変数名を変更しました）

2
diynevala

マシュー・ワトソンは私に良い考えを与えて、私はプラグインに入り、実際のgetViewPortHeight（）関数を次のように更新しました：

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

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

これが失われた人々の役に立つことを願っています。

0
MeanMatt

このサファリバグの解決策を見つけました。スライダーのモードを水平にする必要があります（垂直も機能するがフェードがまったく機能しないかどうかはわかりません）。次に、最初の画像の高さを取得して、「。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 );
});
0
Jones MacNismond