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将最后一张幻灯片显示为第一张幻灯片

回答

相关问题