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

BxSlider displayes last slide as first slide(BxSlider 将最后一张幻灯片显示为第一张幻灯片)

问题描述

我创建了 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 它工作正常.我还尝试了此链接上列出的不同解决方案，但对我没有任何帮助.
我试图在 fiddle 上复制相同的示例，该示例运行良好，但在 live 还是一样的问题

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 将最后一张幻灯片显示为第一张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！