問題描述

我創建了 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 將最后一張幻燈片顯示為第一張幻燈片的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！