BxSlider将最后一张幻灯片显示为第一张幻灯片 [英] BxSlider displayes last slide as first slide

问题描述

我已经创建了4个滑块.最初所有4个都是隐藏的(显示:无)，因此我使用此代码在单击相应类别时显示了相关的滑块.

I have created 4 sliders. Initially all 4 are hidden (display:none) so I have used this code to display the relevant slider on click of its respective category.

滑块配置.

    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张时，它会将最后一张幻灯片显示为第一张幻灯片的幻灯片计数反转.

The problem is when the slider is having less then 20 slides it reverses the count of the slides that is it displayed last slide as first slide.

对于20张或20张以上的幻灯片，效果很好. 我还尝试了此链接中列出的其他解决方案，但对我没有任何帮助.
我试图在小提琴上复制相同的示例，该示例工作正常，但在

For slides 20 or more then 20 it works fine. I also tried different solutions listed on this link but nothing worked for me.
I tried to replicate the same example on fiddle which is working fine but on live it is still giving the same problem

我认为问题出在高度或其他css元素上，这导致它从最后一张幻灯片开始，因为在提琴中查看端口很小，因此它显示了滑块的第一张幻灯片，并且在尝试减小视图尺寸时浏览器的端口，它还以正确的方式显示了滑块.

I think problem is in the height or some other css element which is making it start from the last slide because in fiddle the view port is small so it displayed slider first slide and also when wee try to decrease the size of the view port of the browser it also displayed slider in the right way.

推荐答案

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

I was having this problem too just recently. The solution is you have to put the instance of BxSlider on $(window).load() event not in $(window).ready() here's a sample.

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

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

It is important to note that the problem starts to persist once you have at least 7 slides.

这篇关于BxSlider将最后一张幻灯片显示为第一张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！