Question

我遇到了bxslider轮播的问题。即时尝试使用js中的resize方法制作响应式web和im。我试图使滑块有2个幻灯片，然后通过收缩窗口宽度1滑动。但是,,,,当我缩小窗口宽度时，bxslider不会改变..... 下面是我的代码。我搜索了很多关于这个问题，ppl要求把reloadSlider或destroySlider放进去，但是我知道这个代码到底放在哪里，

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();
});

Answer 1

使用此代码

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 Demo here

修改：尝试设置你的功能slider.reloadSlider（）;在if条件旁边..我再次更新了答案检查。

Answer 2

试试这个

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

    }
}
$window.on('resize',function(){
    slider.reloadSlider();
});

调整大小时jquery bxslider轮播问题

2 个答案: