调整大小时的jquery bxslider轮播问题答案

【问题标题】：jquery bxslider carousel issue when resize调整大小时的jquery bxslider轮播问题
【发布时间】：2014-11-04 07:30:18
【问题描述】：

我遇到了 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();
});

【问题讨论】：

您在bxslider() 函数中的哪里定义了width？
我上面还有另一个功能。所以我已经定义了宽度

标签： jquery plugins bxslider

【解决方案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 条件之外.. 我再次更新了答案检查。

【讨论】：

它有效！但是唯一奇怪的是重新加载幻灯片分页项后无法单击，，这是怎么回事？
@JoJay - 我没有得到你。如果可能的话，请你在 jsfiddle 中发布你的代码并给我链接，然后我可以帮助你
@JoJay - 你是否从上面的代码中删除了alert() 语句？
这是我的 jsfiddle 看起来有问题，今天是我第一次使用 jsfiddle link
问题是即使我点击 bxslider 寻呼机调整大小后也没有发生点击事件

【解决方案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();
});

【讨论】：

我已经尝试过，，，控制台出现类似'的错误：无法读取未定义的属性'reloadSlider'
var 滑块被重新定义为较小的屏幕尺寸。为此进行了编辑。立即查看