如何根据我的窗口大小（台式机、平板电脑、手机）设置 slick.js 设置？答案

【问题标题】：How can I set slick.js settings base on my windows size (Desktop, Tablet, Phone)?如何根据我的窗口大小（台式机、平板电脑、手机）设置 slick.js 设置？
【发布时间】：2017-01-28 04:58:45
【问题描述】：

我有一堆自定义的 HTML div。我将其中的 3 存储在具有 slide 类的 div 中。然后，我使用该幻灯片类调用 slick 函数并应用如下设置：

$('.slide').slick({

    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,

});

对于那些不知道的人，这里是slick.js。

此时我的整个 UI 如下所示：

它们在全屏时看起来不错，但是一旦我减小窗口大小，它们看起来就很差。我正在考虑根据我的窗口大小设置我的光滑设置。例如，

If window size = full OR 1080px {
$('.slide').slick({

        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,

    });

}

else if window size = medium or 720px {
$('.slide').slick({

        slidesToShow: 2,
        slidesToScroll: 1,
        arrows: true,

    });


}else{


// This is for the phone

$('.slide').slick({

        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,

    });
}

实现这样的目标最有效的方法是什么？

这是我的JSFiddle。

【问题讨论】：

标签： javascript jquery css responsive-design slick.js

【解决方案1】：

根据official document，这很容易。

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

【讨论】：