在窗口调整大小时更改jquery的值

Question

我有此代码：

$(".slick-slider-view").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });

当窗口宽度小于1000px时，我需要将'slidesToShow的值更改为2：

    $(".slick-slider-view").slick({
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 1
    });

如何在jquery中使用@media like功能？

Answer 1

从光滑的插件文档中查看以下示例：

$(".slider").slick({

  // normal options...
  infinite: false,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});

该插件具有响应功能。

参考：https://github.com/kenwheeler/slick/

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

const media = window.matchMedia('(max-width: 600px)');

media.addListener((mql) => {
  console.log(window.innerWidth);
});