BxSlider将最后一张幻灯片显示为第一张幻灯片
我创建了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或更多的幻灯片，它工作正常。 我也试过这个链接上列出的不同解决方案，但没有任何对我有用。
我试图在小提琴上复制相同的例子，但工作正常，但在现场仍然存在同样的问题
我认为问题是在高度或其他一些css元素使它从最后一张幻灯片开始，因为在小提琴中视图端口很小所以它显示滑块第一张幻灯片，当我们试图减小视图端口的大小时浏览器它也以正确的方式显示滑块。
我最近才遇到这个问题。 解决方案是您必须将$（window）.load（）事件中的BxSlider实例放在$（window）.ready（）这里是一个示例。
$(window).load(function(){ $('.bxslider').bxSlider({ pagerCustom: '#bx-pager', randomStart: false, controls: true, auto: true }); });
重要的是要注意，一旦你有至少7张幻灯片，问题就会持续存在。
快速解决方案
.bx-clone{ display: none !important; }
如果您不想丢失infiniteLoop动画：
onSliderLoad: function() { $("YOUR_SLIDER_SELECTOR").css( "-webkit-transform", "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)" ); }
这对我来说只是一个纯铬的错误，其中用于从最后一张幻灯片回到第一张幻灯片的无缝滚动的“克隆幻灯片”将首先显示实际的第一张幻灯片。 隐藏克隆幻灯片是一个快速修复，但打破了无限滚动效果。
以下解决方案严格使用CSS修复它，没有粗糙的3D变换CSS，Jquery或任何其他…现在可以使用bootstrap正常运行：
/* 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选项中尝试使用CSS：false，ex：
$(window).load(function(){ $('.bxslider').bxSlider({ pagerCustom: '#bx-pager', randomStart: false, controls: true, auto: true useCSS:false }); });
正如OG Sean所提到的那样是一个Chrome bug。
我讨厌同样的问题，我尝试时唯一需要的是这个css代码：
.bx-viewport li { min-height: 1px; min-width: 1px; }
好吧我不知道为什么但是当我删除这行“minSlides：2”时，它开始以正确的方式工作。
在滑块上的图像上设置显式的高度和宽度标签为我修复了这个问题，滑块包含2-5个图像。
使用bxslider是我生命中最大的错误。