根据屏幕尺寸更改bxslider上的幻灯片数量 [英] change number of slides on bxslider depending on screensize
本文介绍了根据屏幕尺寸更改bxslider上的幻灯片数量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当屏幕低于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屋!
查看全文