在窗口調整大小事件上觸發不同的執行

Question

我有以下輪播代碼[fiddle] ，該代碼根據屏幕大小返回不同數量的要顯示的項目。

$(function() {

var mini = 1000;
var big = 1280;
     if (window.screen.availWidth < mini) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {

$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });    
    }
});

我想向其添加.resize函數，以便項目數量也將在窗口調整大小時發生變化。 我遵循了這個示例，但是無法正常工作。 誰能告訴我如何在示例中添加調整大小功能？

我的嘗試失敗（ 演示 ） ：

function screen_resize() {
 var h = parseInt(window.innerHeight);
    var w = parseInt(window.innerWidth);

if (w <= 800) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
    }
else {

$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });   

}
}
// if window resize call responsive function
$(window).resize(function(e) {
    screen_resize();
});
// call responsive function on default :)
$(document).ready(function(e) {
    screen_resize();
    });

Answer 1

您可以這樣寫：

window.onresize = screen_resize;

編輯：如果您一次調用screen_resize，則輪播看起來不錯，但是如果您多次調用它，它將中斷。 screen_resize在您的代碼中被調用，並且按編程方式工作。