jquery - 根据屏幕尺寸更改 bxslider 上的幻灯片数量

Question

当我的屏幕低于 430 像素时，我想更改 bxslider 上的最大幻灯片数。

我可以使用下面的内容，但这似乎太过分了，必须将所有内容声明两次。有人能想到其他方法吗？

    if ( $(window).width() < 430) {
    var myslider = $('#my-slider').bxSlider({
        ...
        maxSlides       : 1,
    });  
    }

    else {
    var myslider = $('#my-slider').bxSlider({
        ...
        maxSlides       : 4,
    });
    }

Answer 1

您可以通过设置 maxSlides 变量来减少重复性，而不是重复 slider 代码。

var maxSlides,
    width = $(window).width();

if (width < 430) {
    maxSlides = 1;
} else {
    maxSlides = 4;
}

var myslider = $('#my-slider').bxSlider({
    ...
    maxSlides: maxSlides,
});

您可以使用 ternary operator 使其变得更简单，尽管试图变得过于简洁并不一定有好处。

var width = $(window).width();

var myslider = $('#my-slider').bxSlider({
    ...
    maxSlides: (width < 430) ? 1 : 4,
});