BxSlider將最後一張幻燈片顯示爲第一張幻燈片

我創建了4個滑塊。最初所有4個隱藏（顯示：無），所以我用這個代碼來顯示相應的滑塊點擊其各自的類別。BxSlider將最後一張幻燈片顯示爲第一張幻燈片

滑塊配置。

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上列出的不同解決方案，但沒有爲我工作。
我試圖複製同樣的例子在fiddle這是工作的罰款，但對live它仍然給了同樣的問題

我認爲問題出在高度或正在從最後一張幻燈片啓動一些其他的CSS元素因爲在小提琴中，視口很小，所以它顯示滑塊的第一張幻燈片，並且在嘗試減小瀏覽器視圖端口的大小時，它也以正確的方式顯示滑塊。

來源

2013-08-22 Abhimanue Tamang

我太剛剛有這個問題。解決的辦法是將BxSlider的實例放在$（window）.load（）事件中，而不是放在$（window）.ready（）中，這裏是一個示例。

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

請務必注意，一旦您擁有至少7張幻燈片，問題就會持續存在。

來源

2013-12-03 03:35:30 Abetoy

這解決了我的問題:)非常感謝你。我發現它會在'水平'模式下發生。我試圖改變模式'淡入淡出'，它工作正常（意味着不顯示最後一張幻燈片）。 – user1128331

它在bxslider文檔中說您必須使用.onReady或它不起作用。你的工作正在進行中，但是你可能想要避免這種解決方法，以便在文檔中改變某些預期爲onReady（）的文檔。還有其他解決方法/修復此問題的工作。 –

我有5個幻燈片，問題正在發生，所以它發生在少於7 :( – Periback

好吧我不知道爲什麼，但當我刪除這條線「minSlides：2」時，它開始以正確的方式工作。

來源

2013-08-22 09:21:55

快速的解決方案：

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

如果你不想失去infiniteLoop動畫：

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

來源

2013-11-13 15:37:54

這實際上幫了我！但是我不得不添加！重要的是，因爲bx滑塊爲覆蓋此樣式的.bx-clone元素添加了樣式。謝謝！ –

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

在滑塊中的圖像上設置一個明確的高度和寬度標籤爲我解決了這個問題，包含2-5圖像的滑塊。

來源

2014-02-27 16:13:47 mrutt

對於我來說，這是一個僅限於鉻的錯誤，其中用於從最後一個幻燈片回到第一個幻燈片的無縫滾動的「克隆幻燈片」將首先顯示實際的第一個幻燈片。隱藏克隆幻燈片是一個快速修復，但打破無限滾動效果。

這下面的解決方案固定它，我嚴格按照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來使用onSlideBefore顯示克隆你已經走得太遠了，根據你的具體情況，可能會有一個CSS修復。有時候，它起因於BOOTSTRAP的圖像大小和/或顯示樣式問題，所以如果您使用BS，那麼肯定會有CSS修復。一般來說，如果所有幻燈片尺寸相同，請嘗試設置圖像的高度和寬度，最大高度和寬度以及最小高度和寬度，並且可以對其進行修復。

這是沒有必要的，但如果不工作，在bxSlider初始化選項嘗試useCSS：假的，例如：

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

來源

2014-07-08 02:45:44

謝謝！CSS修復對我有用！ – Footniko

正如OG肖恩提到it's Chrome錯誤。

我哈得同樣的問題，當我試圖爲這個CSS代碼所需要的唯一的事情：

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

來源

2014-10-03 12:12:36 Turbojohan

你只需要停止循環：

infiniteLoop:false

...且有沒有更多的.bx克隆

http://bxslider.com/options

來源

2015-01-22 13:06:25 user4482668

是否有可能無限循環和刪除。 bx-clones？ – Ionut

這解決了我的問題，但我並不需要無限循環，所以這不是一個出價交易，謝謝。 – Mel

與bxslider WA工作這是我生命中最大的錯誤。

來源

2017-12-22 12:38:07 mzvarik

BxSlider將最後一張幻燈片顯示爲第一張幻燈片

回答

相關問題