BxSliderは最後のスライドを最初のスライドとして表示します

Question

4つのスライダを作成しました。当初は4つすべてが非表示（表示：なし）なので、このコードを使用してそれぞれのカテゴリのクリックで関連するスライダを表示しました。

スライダの設定。

touchEnabled: true, 
    hideControlOnEnd: true, 
    preloadImages: 'all', 
    infiniteLoop: false, 
    mode: 'horizontal', 
    startSlide: 0, 
    slideWidth: 300, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 10, 
    pager: false, 
    slideSelector: ".isotope-item", 
    nextSelector: "#forefoo2_next", 
    prevSelector: "#forefoo2_prev", 
    nextText: '', 
    prevText: '', 
    onSliderLoad: function(){ 
     jQuery(".sliloading").hide(); 
    }, 


jQuery(window).ready(function(){ 
    var slider4 = jQuery('.cat_fore').bxSlider(); 
    var slider2 = jQuery('#cat_two').bxSlider(); 
    var slider3 = jQuery('.cat_three').bxSlider(); 
    var slider1 = jQuery('.cat_one').bxSlider(); 

    jQuery("#sel_cat a").on("click", function(){ 
     var current  = jQuery(this).attr("slider"); 
     jQuery(".sliloading").show(); 

     jQuery(".slider").hide(); 
     if(current == "cat_one"){ 
      slider1.reloadSlider(s1config); 
     }else if(current == "cat_two"){ 
      slider2.reloadSlider(s2config); 
     }else if(current == "cat_three"){ 
      slider3.reloadSlider(s3config); 
     }else if(current == "cat_fore"){ 
      slider4.reloadSlider(s4config); 
     } 
    } 
}); 

問題は、スライダのスライドが20より少なく、最後のスライドが最初のスライドとして表示されているスライドの数が逆になる場合です。

スライド20以上20回でうまくいきます。 私はthis linkに記載されている別のソリューションも試しましたが、何も私のために働いていませんでした。
私は、問題はそれが最後のスライドから開始しつつある高さまたは他のいくつかのCSSの要素であると考え、私は正常に動作しているfiddleに同じ例を複製しようとしたが、liveに、それはまだ同じ問題に

を与えていますなぜなら、ビューポートは小さいので、スライダーの最初のスライドを表示し、ブラウザーのビューポートのサイズを小さくしようとすると、正しい方法でスライダーも表示されたからです。

Answer 1

を私もちょうど最近、この問題を抱えていました。解決策は$（window）.ready（）ではなく、$（window）.load（）イベントにBxSliderのインスタンスを置かなければならないということです。ここにサンプルがあります。

$(window).load(function(){ 
      $('.bxslider').bxSlider({ 
       pagerCustom: '#bx-pager', 
       randomStart: false, 
       controls: true, 
       auto: true 
      });  
     }); 

スライドが7枚以上になると問題は解決しないことに注意してください。

Answer 2

[OK]私はなぜこの行「minSlides：2」を削除したら正しい方法で作業を開始するのかわかりません。

Answer 3

高速ソリューション：

.bx-clone{ 
    display: none !important; 
} 

あなたはinfiniteLoopアニメーション失いたくない場合は、次の

onSliderLoad: function() { 
     $("YOUR_SLIDER_SELECTOR").css(
     "-webkit-transform", 
     "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)" 
    ); 
    } 

Answer 4

<li> 
    <img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/> 
</li> 

スライダの画像に明示的な高さと幅のタグを設定すると、この問題が2〜5枚の画像を含むスライダで修正されました。

Answer 5

これは私のためにクロムのみのバグで、どこ戻って最初に最後のスライドからのシームレスなスクロールを行うためのもの「クローンスライドは、」道のうち、実際の最初のスライドを押して最初に表示されます。クローンスライドを非表示にしておくと、無限のスクロール効果が損なわれます。

このCSSを厳密に私のためにそれを固定ソリューションの下に、何も危ない3Dは、CSS、jQueryの、または何かを変換しないが...今、ブートストラップでOK果たし：

/* BUG FIX FOR CLONE SLIDE FIRST */ 

.bx-wrapper img { 
    max-width: 100%; 
    display: inline-block; 
} 

.bx-viewport li { 
    min-height: 1px; 
    min-width: 1px; 
} 

あなたはjqueryのを使用している場合、私は思いますonSlideを使用してクローンを表示するあなたがあまりにも遠くになってしまう前に、特定の状況に応じておそらくCSS修正があります。場合によってはBOOTSTRAPの画像サイズや表示スタイルの問題が原因です.BSを使用している場合は、確かにCSSの修正があります。一般に、すべてのスライドが同じサイズの場合、画像の高さと幅、最大の高さと幅、最小の高さと幅を設定してみてください。

これは必要ありませんが、それが動作しない場合は、bxSliderのinitオプションでuseCSSを試してみてください：偽、例：

$(window).load(function(){ 
     $('.bxslider').bxSlider({ 
      pagerCustom: '#bx-pager', 
      randomStart: false, 
      controls: true, 
      auto: true 
      useCSS:false 
     });  
    }); 

Answer 6

OGショーンで述べたようにはクロームのバグをit's。

私は同じ問題をhade、私がしようとしたときに必要な唯一のものは、このCSSコードだった：

.bx-viewport li { min-height: 1px; min-width: 1px; } 

Answer 7

あなただけのループを停止する必要があります。

infiniteLoop:false 

を...とありますbxslider WAでの作業これ以上.bxクローン

http://bxslider.com/options

Answer 8

私の人生の最大の間違い。