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段代码，试图从每个代码中挑选出我需要的东西，所以感觉有点像frankenstein，并且可能是它无法正常工作的原因。

Answer 1

如果您设置＆＃39; flexslider.vars＆＃39;你需要在某个地方宣布它。
你错过了一个＆＃39; resize＆＃39;窗户上的听众

```

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

```

使用window.matchMedia将变量传递给滑块选项

1 个答案: