Используйте window.matchMedia, чтобы передать переменную в параметры слайдера.

Question

У меня есть этот код (некоторые из которых, возможно, не создают тонны смысла ...), но вот что я пытаюсь выполнить.

1) С помощью клавиши window.matchMedia, чтобы определить ширину экрана 2) создают функцию, основанную на запросе медиа, который выводит значение в переменной gridSize 3) Передать эту функцию getGridSize в список варианты слайдера.

код у меня есть

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

    });  

я объединил 2 куска кода, пытаясь разобраться в биты, которые мне нужно от каждого, поэтому он чувствует себя немного Франкенштейна типа, и, вероятно, почему это не за работой.

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

` ``