Question

我正在使用Slick滑块/ 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

该插件已经可以更新不同视图端口上的选项。请看看这个。希望这会对你有所帮助。

$('.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
  ]
});

使用jQuery检测屏幕大小并更改属性

1 个答案: