根据屏幕大小更改 bxslider 上的幻灯片数量 [英] change number of slides on bxslider depending on screensize

问题描述

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

I want to change the max number of slides on the bxslider for when my screen is below 430px.

我可以使用下面的内容，但这似乎有点过分了，必须两次声明所有内容.有没有其他人能想到的方法?

I could use the below but this seems like overkill having to declare everything twice. Is there any other way that someone could think of?

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

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

推荐答案

您可以通过设置 maxSlides 变量来减少重复性，而不是重复您的滑块代码.

You can make things less repetitive by setting a maxSlides variable, rather than repeating your slider code.

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

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

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

您可以使用 三元运算符使其更简单，尽管尝试过于简洁不一定有好处.

You could make it even simpler with a ternary operator, though trying to get too concise is not necessarily a benefit.

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

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

这篇关于根据屏幕大小更改 bxslider 上的幻灯片数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！