Verwenden Sie window.matchMedia, um Variablen in Slider-Optionen zu übergeben

Question

Ich habe diesen Code (von denen einige nicht viel Sinn machen ...), aber hier ist, was ich zu erreichen versuche.

1) Mit der window.matchMedia Taste, um die Breite des Bildschirms 2) Erstellen eine Funktion auf den Medien Abfrage bestimmen, die 3) übergibt, die getGridSize Funktion in eine Liste einen Wert in der Variable Gridsize ausdruckt von Optionen für einen Schieberegler.

Der Code, den ich habe, ist

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: "" 

    });  

I 2 Teile des Codes amalgamiert und versucht, die Bits zu sortieren, die ich von jeder brauchen, so fühlt es sich ein bisschen frankenartig und ist wahrscheinlich, warum ist es nicht Arbeiten.

Answer 1

1. Wenn Sie 'flexslider.vars' einstellen, müssen Sie es irgendwo deklarieren.
2. Sie vermissen eine 'Größe ändern' Hörer auf dem Fenster

`` `

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

` ``