根据屏幕大小更改bxslider上幻灯片的数量

Question

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

我可以使用下面的，但这似乎是矫枉过正，不得不声明两次。有没有别的办法可以让人想到？

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, 
}); 

你可以使它更具有ternary operator简单，但试图让太简洁不一定是好处。

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(); 
} 
});