Javascript 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张以上的幻灯片，效果很好。 我还尝试了上面列出的不同解决方案，但没有任何效果。
我试着复制同样的例子，虽然效果很好，但它仍然存在同样的问题

---

我认为问题在于高度或其他css元素，这使得它从上一张幻灯片开始，因为在fiddle中，视图端口很小，所以它在第一张幻灯片中显示滑块，而且当我们尝试减小浏览器视图端口的大小时，它也以正确的方式显示滑块

好的，我不知道为什么，但是当我删除这行“minSlides:2”时，它开始以正确的方式工作。

快速解决方案：

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

如果不想丢失infiniteLoop动画，请执行以下操作：

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

---

我最近也有这个问题。解决方案是必须将BxSlider实例放在$（window）.load（）事件上，而不是放在$（window）.ready（）中。下面是一个示例

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

需要注意的是，当您至少有7张幻灯片时，问题就开始持续存在。

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

---

在滑块中的图像上设置一个明确的高度和宽度标签，解决了我使用包含2-5个图像的滑块时遇到的问题。

这对我来说是一个chrome特有的错误，用于从最后一张幻灯片无缝滚动回第一张幻灯片的“克隆幻灯片”将显示第一次将实际的第一张幻灯片推开。隐藏克隆幻灯片是一种快速修复方法，但会破坏无限滚动效果

下面这个解决方案严格地用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来显示使用了slideonslide的克隆，根据您的具体情况，可能会有一个CSS修复程序。有时，它源于引导的图像大小和/或显示样式问题，因此，如果您使用的是BS，肯定会有CSS修复。一般来说，如果所有幻灯片大小相同，请尝试设置图像的高度和宽度、最大高度和宽度以及最小高度和宽度，这样可能会解决问题

这不是必需的，但如果不起作用，请在bxSlider init选项中尝试useCSS:false，例如：

$(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; }

---

您只需停止循环：

infiniteLoop:false

…而且没有更多的.bx克隆

---

使用bxslider是我一生中最大的错误。

这实际上帮助了我！但我必须补充一点！重要信息，因为bx滑块将样式添加到覆盖此样式的.bx克隆元素。谢谢很好的解决方案。拯救了这一天！这解决了我的问题：）非常感谢。我发现当模式为“水平”时会发生这种情况。我尝试将模式更改为“淡入淡出”，效果很好（意味着不显示最后一张幻灯片）。bxslider文档中说您必须使用。onReady或它将不起作用。您的工作正常，但您可能希望避免这种变通方法，以便在文档发生更改时，能够坚持使用文档，以防它们更改期望它处于onReady（）状态的内容。这个问题还有其他解决方法/修复方法可以解决。我有5张幻灯片，问题正在发生，所以不到7张就发生了：（太棒了。非常感谢。是否可以打开无限循环并删除.bx克隆？这解决了我的问题，但我不需要无限循环，所以这不是一个出价交易。谢谢。