window.matchMediaを使用して変数をスライダオプションに渡します

Question

私はこのコードを持っています（その中には意味をなさないかもしれませんが...）が、これを達成しようとしています。

1）可変グリッド寸法 3の値を出力し、メディアクエリに基づいて関数を作成）画面 2の幅を決定するためにwindow.matchMediaキーを使用）のリストにそのgetGridSize関数を渡しスライダのオプション。

私が持っているコードは、私はそれぞれから必要なビットを整理しようとすると、コードの2枚を合併

var mq = window.matchMedia("(min-width: 500px)"); 

var gridSize = getGridSize(); 

function getGridSize() { 
if (mq.matches) { 
    // window width is at least 500px 
    gridSize = 4; 
} else { 
    // window width is less than 500px 
    gridSize = 1; 
    } 
    }; 

    flexslider.vars.minItems = gridSize; 
    flexslider.vars.maxItems = gridSize; 


$('.flexslider').flexslider({ 
     animation: "slide", 
     animationSpeed: 400, 
     animationLoop: false, 
     itemWidth: 210, 
     itemMargin: 5, 
     minItems: getGridSize(), 
     maxItems: getGridSize(), 
     prevText: "", 
     nextText: "" 

    });  

あるので、ビットフランケンシュタインのような感じ、とそうでない理由はおそらくですワーキング。

Answer 1

1. 'flexslider.vars'を設定する場合は、どこかで宣言する必要があります。
2. あなたは窓

`` `

var flexslider = {vars: {}}; 
var mq = window.matchMedia("(min-width: 500px)"); 

function getGridSize() { 
    return mq.matches ? 4 : 1; 
}; 

$('.flexslider').flexslider({ 
    animation: "slide", 
    animationSpeed: 400, 
    animationLoop: false, 
    itemWidth: 210, 
    itemMargin: 5, 
    minItems: getGridSize(), 
    maxItems: getGridSize(), 
    prevText: "", 
    nextText: "" 
}); 

$(window).on('resize', function() { 
    var gridSize = getGridSize(); 
    flexslider.vars.minItems = gridSize; 
    flexslider.vars.maxItems = gridSize; 
}); 

` ``

の 'サイズを変更' リスナーが欠落しています