javascript - 如何使加载项的数量与屏幕尺寸相关？

Question

我正在使用 jQuery 在轮播中加载最新帖子（我使用此处的轮播）。我使用此代码为最新的 3 个帖子设置 3 个项目的轮播：

jQuery(function($) {
    $('#slider').carouFredSel({
        prev: '#btn_prev',
        next: '#btn_next',
        auto: false,
        items: 3,
    });
});

但我需要先检查设备的屏幕，如果是小（移动），则将轮播的项目设置为 1，如果是中（平板电脑/ipad），则将其设置为 2，如果是正常的电脑屏幕，则设置项目3.我怎样才能使这个有条件？

提前非常感谢:)

Answer 1

根据屏幕大小创建一个 var，然后将其提供给您的滑块。

jQuery(function($) {
    var itemLength = 0;
    var windowSize = $(window).width();
    if (windowWidth > 1024) { itemLength = 3 }
    else if (windowWidth > 768 { itemLength = 2 }
    else { itemLength = 1 }

    $('#slider').carouFredSel({
        prev: '#btn_prev',
        next: '#btn_next',
        auto: false,
        items: itemLength,
    });
});