Question

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

但是目前我在屏幕调整到小于600px时出现问题，然后增加了它没有使用正确的设置重新加载滑块（3张幻灯片）

有谁知道问题可能是什么？我在下面设置了一个小提琴

news3col = $('ul').bxSlider({
    slideWidth: 500,
    minSlides: 3,
    maxSlides: 3,
    slideMargin: 30
});

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 () {
    // the call to checkMq here will execute after the document has loaded
    checkMq();
    $(window).resize(function () {
        // the call to checkMq here will execute every time the window is resized
        checkMq();
    });
});

Answer 1

我不知道如果这篇帖子大约2个月后对你来说太迟了，但是最近我也有类似的事情需要为我的一个网站做，而不是使用Modernizr来检测用户当前的屏幕/媒体查询的宽度，尝试使用窗口元素上的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
        });
    }
}

试试看是否有效。

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

1 个答案: