web-dev-qa-db-ja.com

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

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

スライダー構成。

    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枚でも問題なく機能します。 このリンク に記載されているさまざまな解決策も試しましたが、何もうまくいきませんでした。
同じ例を fiddle で再現しようとしましたが、正常に機能していますが live でも同じ問題が発生します

私は問題は高さまたは最後のスライドから開始する他のCSS要素にあると思いますブラウザはまた、正しい方法でスライダーを表示しました。

javascriptjqueryjquery-pluginsbxslidersliders
13
Abhimanue Tamang

最近、私もこの問題を抱えていました。解決策は、BxSliderのインスタンスを$（window）.ready（）ではなく$（window）.load（）イベントに配置する必要があることです。ここにサンプルがあります。

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

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

15
Abetoy

高速ソリューション：

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

InfiniteLoopアニメーションを失いたくない場合：

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

これは私にとってChromeのみのバグです。最後のスライドから最初のスライドにシームレスにスクロールすることを目的とした「クローンスライド」は、最初に実際の最初のスライドを邪魔にならないように押し出すことを示します。クローンスライドを非表示にすることは簡単な修正ですが、無限のスクロール効果が失われます。

この以下の解決策は、CSS、厳密に3D変換するCSS、Jqueryなどで厳密にそれを修正しました... bootstrap now：

/* 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を使用して、onSlideBeを使用してクローンを表示している場合は、行き過ぎたため、特定の状況に応じてCSSを修正していると思います。 BOOTSTRAPでの画像サイズや表示スタイルの問題が原因で発生する場合があるため、BSを使用している場合は、CSSの修正が確実に行われます。一般に、すべてのスライドが同じサイズの場合、画像の高さと幅、最大の高さと幅、最小の高さと幅を設定してみてください。

これは必須ではありませんが、それが機能しない場合は、bxSliderの初期化オプションでuseCSS：false、ex：を試してください。

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

ループを停止するだけです：

infiniteLoop:false

...そして.bxクローンはもうありません

http://bxslider.com/options

4
user4482668

OG Seanが述べたように、これはChromeバグです。

私は同じ問題を抱えていて、試したときに必要な唯一のことはこのCSSコードでした：

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

Bxsliderでの作業は、私の人生の最大の間違いでした。

0
Martin Zvarík

なぜかわかりませんが、この行「minSlides：2」を削除すると、正しい方法で動作し始めます。

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

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

0
mrutt