18

とにかく、最近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();
});

ありがとう。

4

6 に答える 6

52

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

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

代わりに使用することを検討してください

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

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

于 2013-02-13T08:21:07.243 に答える
7

使用できます

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});
setTimeout(function(){
            slider.redrawSlider();
        },100);
于 2014-11-06T11:26:51.203 に答える
3

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

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

したがって、次の場所から変更を加える必要がありました。slider.viewport.css（'height'、getViewportHeight（））; これに：slider.viewport.css（'height'、''）;

代わりにコピーのオプションでプラグインを変更しましたが、変更する最も簡単な方法は上の行を変更することです。」

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

于 2014-07-25T16:08:52.410 に答える
2

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

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

画像が読み込まれるのを待つために、しかし最終的に私は画像が読み込まれるのを待つ素敵なライブラリImagesLoadedに切り替えました：

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

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

于 2014-04-04T07:42:05.577 に答える
0

Matthew Watsonが私に良いアイデアをくれたので、プラグインにアクセスして、実際のgetViewPortHeight（）関数を次のように更新しました。

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

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

これが失われた人々の助けになることを願っています。

于 2015-07-30T17:43:44.833 に答える
0

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