jquery - 在调整窗口大小时更改 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 之类的功能？

Answer 1

从 slick 插件文档中查看此示例:

$(".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/