BxSlider将最后一张幻灯片显示为第一张幻灯片

Question

我创建了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元素使它从最后一张幻灯片开始,因为在小提琴视图端口很小所以它显示滑块第一张幻灯片,当我们试图减小视图端口的大小时浏览器它也以正确的方式显示滑块.

Answer 1

我最近才遇到这个问题.解决方案是您必须将$(window).load()事件中的BxSlider实例放在$(window).ready()这里是一个示例.

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

重要的是要注意,一旦你有至少7张幻灯片,问题就会持续存在.

Answer 2

快速解决方案

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

如果您不想丢失infiniteLoop动画:

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

Answer 3

这对我来说只是一个纯铬的错误,其中用于从最后一张幻灯片回到第一张幻灯片的无缝滚动的"克隆幻灯片"将首先显示实际的第一张幻灯片.隐藏克隆幻灯片是一个快速修复,但打破了无限滚动效果.

以下解决方案严格使用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
        });    
    });