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

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

我可以使用下面的内容，但这似乎有点过分必须声明一切两次。 有没有其他人可以想到的方式？

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

Answer 1

您可以通过设置maxSlides变量来减少重复次数，而不是重复滑块代码。

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

您可以使用三元运算符使其更简单，但尝试过于简洁并不一定有益。

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

Answer 2

这是一个响应式解决方案，可在您调整窗口大小时动态调整设置：

 var slider, oBxSettings = { /* Your bxSlider settings */ }; function init() { // Set maxSlides depending on window width oBxSettings.maxSlides = window.outerWidth < 430 ? 1 : 4; } $(document).ready(function() { init(); // Initial bxSlider setup slider = $('#my-slider').bxSlider(oBxSettings); }); $(window).resize(function() { // Update bxSlider when window crosses 430px breakpoint if ((window.outerWidth<430 && window.prevWidth>=430) || (window.outerWidth>=430 && window.prevWidth<430)) { init(); slider.reloadSlider(oBxSettings); } window.prevWidth = window.outerWidth; }); 

Answer 3

我用jquery这样用它：

  var windowWidth = $(window).width(); var obxSettings = {...}; slider.bxSlider(obxSettings); $(window).resize(function() { windowWidth = $(window).width(); if(windowWidth < 768) { obxSettings.minSlides = 2; slider.reloadSlider(); } else { obxSettings.minSlides = 3; slider.reloadSlider(); } });