调整大小时的jQuery bxslider轮播问题 [英] jquery bxslider carousel issue when resize

问题描述

我对bxslider传送带有问题.我正在尝试制作响应式网站，并在js中使用了resize方法.我试图使滑块具有2个幻灯片，然后通过缩小窗口宽度使1个幻灯片. 但是，当我缩小窗口宽度时，bxslider不会改变..... 下面是我的代码.我搜索了很多有关此问题的信息，ppl要求放置reloadSlider或destroySlider，但我不知道此代码的确切位置是

i have a problem with bxslider carousel. im trying to make responsive web and im using resize method in js. im trying to make slider has 2 slides and then 1 slide by shrinking window width. But,,,, when i shrink window width, bxslider is not changing..... below is my code. i searched a lot about this problem,, ppl ask to put reloadSlider or destroySlider but i dnt know where exactly put in this code,,

var slider;
    function bxslider(){
        if(width>555&&width<=765){
        slider=$('.bxslider2').bxSlider({
            minSlides: 2,
            maxSlides: 2,
            slideWidth:400,
            moveSlides:1
        });
        slider.reloadSlider();
    }
    if(width<=555){
        var slider=$('.bxslider2').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideWidth:0,
            moveSlides:1
       });
       slider.reloadSlider();
    }
}
$window.on('resize',function(){
    bxslider();
});

推荐答案

使用此代码

var slider;    
function bxslider(){
            var width = $(document).width();
        //alert(width);

        if(width>555&&width<=765){
        slider=$('.bxslider2').bxSlider({
            minSlides: 2,
            maxSlides: 2,
            slideWidth:400,
            moveSlides:1
        });

    }
    if(width<=555){
        var slider=$('.bxslider2').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideWidth:0,
            moveSlides:1
       });

    }
    slider.reloadSlider();
}
$(window).on("orientationchange load resize", function () {
    bxslider();
});

JsFiddle演示

JsFiddle Demo here

编辑:尝试将您的函数slider.reloadSlider();放进去.外面的if条件..我再次更新了答案检查.

try tu put your function slider.reloadSlider(); out side the if Condition .. I updated the answer check once again.

这篇关于调整大小时的jQuery bxslider轮播问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！