根據屏幕大小更改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(); 
} 
});