jQuery-bxSlider调整屏幕大小并更改滑块设置

当视口大小为600px+时，我希望滑块显示3个项目；当视口小于600px时，我希望滑块仅显示一个项目

但目前我有一个问题，当屏幕的大小被调整到小于600px，然后增加它的大小时，没有用正确的设置重新加载滑块（3张幻灯片）

有人知道问题出在哪里吗？我在下面竖起了一把小提琴

---

我不知道这对你来说是否太晚了，因为这篇文章已经发布了大约2个月了，但最近我也为我的一个网站做了类似的事情，我没有使用Modernizer来检测用户当前的屏幕/媒体查询的宽度，而是尝试使用jQuery的width（）来检查窗口的宽度在窗口元素上

因此

    function checkMq() {
    if (Modernizr.mq('only screen and (max-width: 599px)')) {
        $('div').css('background-color', 'lightblue');
        news3col.reloadSlider({
            minSlides: 1,
            maxSlides: 1
        });
    }
    if (Modernizr.mq('only screen and (min-width: 600px)')) {
        $('div').css('background-color', 'lightgreen');
        news3col.reloadSlider();
    }
}

您应该尝试使用：

function checkMq() {
    if ($(window).width() <= 599) {
        $('div').css('background-color', 'lightblue');
        news3col.reloadSlider({
            minSlides: 1,
            maxSlides: 1
        });
    }
    if ($(window).width() >= 600) {
        $('div').css('background-color', 'lightgreen');
        news3col.reloadSlider({
            minSlides: 3,
            maxSlides: 3
        });
    }
}

函数checkMq（）{
如果（$（窗口）.width（）=600）{
$（'div'）.css（'background-color'，'lightgreen'）；
news3col.reloadSlider({
米斯利德斯：3，
最大幻灯片数：3
});
}
}

试试看这是否有效

function checkMq() {
    if ($(window).width() <= 599) {
        $('div').css('background-color', 'lightblue');
        news3col.reloadSlider({
            minSlides: 1,
            maxSlides: 1
        });
    }
    if ($(window).width() >= 600) {
        $('div').css('background-color', 'lightgreen');
        news3col.reloadSlider({
            minSlides: 3,
            maxSlides: 3
        });
    }
}