javascript - jQuery:轮播的媒体查询

Question

想知道是否有针对此的解决方案，似乎无法弄清楚，我正在寻找与媒体查询等效的 jQuery 来更改我已设置的轮播功能。
代码非常简单:

$(window).load(function () {
    $(function () {
        $(".events-slider").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            scroll: 3,
            speed: 800
        });
    });
});

但是我设置了一些 css 媒体查询，从而在 900px 处 .event-slider 减小了大小，因此现在只显示 1 张幻灯片而不是 3 张幻灯片，因此，我想更改 jQuery 函数以反射(reflect)这一点，即当浏览器窗口缩小到 900px 以下时，scroll: 3, 属性更改为 scroll: 1, 这是否可能？任何建议将不胜感激!

Answer 1

您可以在 $(window) 上使用 jQuery .width() 函数来查找浏览器视口(viewport)的宽度，类似于此线程的解决方案:

jQuery: How to detect window width on the fly?

$(document).ready(function() {
var window = $(window);

function checkWindowWidth() {
    var windowsize = window.width();
    if (windowsize > 900) {
        $(function () {
            $(".events-slider").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                scroll: 3,
                speed: 800
            });
        });
    } else {
        $(function () {
            $(".events-slider").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                scroll: 1,
                speed: 800
            });
        });
    }
}
checkWindowWidth();
$(window).resize(checkWidth);
});