javascript - 使用 jQuery 检测屏幕尺寸并更改属性

Question

我正在使用 Slick slider /carousal，目前显示六个元素。现在我想做的是我希望脚本检测浏览器是否已调整大小或从较小的屏幕(例如 768px 以下)查看，然后显示的元素数应更改为 3。这是媒体查询的完美复制品CSS 中的函数，它检测屏幕大小以使网站响应。我想在我的 jQuery 函数中执行同样的事情，但我从未这样做过。这是我的脚本:

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).on('ready', function() {
    jQuery(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 6,
        slidesToScroll: 6
    });
});
</script>

Answer 1

该插件已经可以更新不同视口(viewport)上的选项。请看看这个。希望这对您有所帮助。

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
  {
  breakpoint: 1024,
  settings: {
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    dots: true
  }
},
{
  breakpoint: 600,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 2
  }
},
{
  breakpoint: 480,
  settings: {
    slidesToShow: 1,
    slidesToScroll: 1
  }
}
  // You can unslick at a given breakpoint now by adding:
   // settings: "unslick"
  // instead of a settings object
  ]
});