根据窗口宽度调整大小启用和​​禁用脚本

Question

我想要做的是当浏览器窗口宽度低于1000px时，例如触发脚本owl carousel。但是当浏览器窗口宽度大于1000px时，禁用owl轮播并且内容要再次正常显示。

当窗口超过1000px时，我设法做到这一点，并将其调整到1000px以下，但当我再次调整大小超过1000px时，它不会禁用猫头鹰旋转木马。

我的代码

<script type="text/javascript">

$(document).ready(function() {

 $(window).resize(function() {
  if ($(window).width() < 1000) {
     $(".box").owlCarousel();
  }
 else {
    //do nothing what to put here???
 }
});
});



</script>

<div class="box">
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
</div>

如果窗口调整为.box div，我还尝试使用javascript添加一个类，但是当它在1000px以下调整大小时再次使用javascript时，它将不会像我想要的那样动态更改。

您能告诉我检查浏览器宽度和启用/禁用猫头鹰旋转木马的最佳方法吗？

Answer 1

Window.matchMedia()可能是您的解决方案。来自文档：

  

返回一个新的MediaQueryList对象，表示指定媒体查询字符串的已解析结果。

示例：

if (window.matchMedia("(max-width: 1000px)").matches) {
  $(".box").owlCarousel();
} else {
  /* however you disable the carousel... */
}

希望这有帮助！

Answer 2

我以前没有使用过owlcarousel，但很快就看the docs，我想你想使用owl.destroy（）方法。

$(document).ready(function() {

  $(".owl-carousel").owlCarousel()

  //get carousel instance data and store it in variable owl
  var owl = $(".owl-carousel").data('owlCarousel')
  $(window).resize(function() {
    if ($(window).width() < 1000) {
      owl.reinit()
    } else {
      owl.destroy()
    }
  });
});