0

私の bxSlider は水平方向にブラウザー幅の 100% にまたがります。複数の (画像) スライドがビューポート全体に表示され、オプションで「moveSlides: 1」が設定されます。

合計 8 枚のスライドがローテーションされています。「次へ」の矢印をクリックして先に進むと、最後に奇妙なことが起こっています。8 番目のスライドが最初に右側からビューポートに入り、クリックを続けると、左側から再び循環するまで、右側に画像が表示されません。その時点で、スライド #1 ～ 3 が突然表示されます。それらは順番にあるはずです。そこからサイクルが繰り返され、スライド #8 が再びビューポートに入ると同じシナリオが発生します。

基本的に、スライド #1 などは、ビューポートに表示されるとすぐに、この遅延なしでスライド 8 の右側に表示されるようにします。CSS を調べたところ、ビューポートの計算がオフになっていることが問題であることがわかりました (具体的には、.bx-viewport の「左」の位置)。

jquery.bxslider.js のこの特定の計算 (スライド ラインナップのラッピング) をどのように変更できますか? または、ビューポートの計算を微調整する必要のない別のアプローチがありますか?

私はコードを含めて、ここで問題を再現しました: http://jsfiddle.net/astewes/S7L2n/1/

次のオプションで bxSlider を使用しています。

jQuery(document).ready(function($){
  $('ul#homepage.bxslider').bxSlider({
    controls: true,
    displaySlideQty: 5,
    pager: false,
    startingSlide: 0,
    moveSlideQty: 1,
    infiniteLoop: true,
    preloadImages: 'all',
    adaptiveHeight: true,
    captions: false
  });
});

編集:使用しているオプションのリストを更新しました。上記の遅延を減らすことができましたが、画像 #1 に戻ると、スライダーは依然として奇妙な動作をします。displaySlideQty遅延時間を短縮するのに役立つことが証明されていますが、それだけに頼るという考えには賛成できません. スライド間のスペースもオフになっています (縦サイズの画像の場合) が、縦と横の組み合わせを使用しているためと思われます。ポートレート画像の幅を動的に変更しようとしましたが、 (すべてを中央に配置するために) display: tableand を使用すると、display: table-cellそのアプローチは役に立たなくなりました。

4

0 に答える 0