jquery bxslider旋转木马调整大小时出现问题



我对bxslider转盘有问题。我尝试制作响应式web,并在js中使用resize方法。我试图通过缩小窗口宽度使滑块有2个滑块,然后有1个滑块。但是,,,,当我缩小窗口宽度时,bxslider不会改变。。。。。下面是我的代码。我搜索了很多关于这个问题的信息,人们要求放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();
});

使用此代码

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演示在这里

编辑:尝试放入函数滑块.reloadSlider();超出if条件。。我再次更新了答案检查。

试试这个

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

最新更新