Question

我正在尝试在我的页面上实现一个光滑的滑块。通过光滑的文档，他们已经提到要以响应的方式使用滑块，请按照代码（我在下面发布）。我无法理解断点的使用。任何人都可以解释我的代码。我试过谷歌搜索，但没有找到解决方案。我已粘贴下面的代码，请完成。

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

Answer 1

断点指的是触发以下settings的逻辑的屏幕宽度。具体来说，它们将触发最多指定的值（以像素为单位）。

在上面的示例中，这与以下内容相关：

480px且更窄：显示1张幻灯片
481px至600px：显示2张幻灯片
601px到1024px：显示3张幻灯片（带有无限循环）
1025px和更宽：显示4张幻灯片

Breakpoint在光滑滑块中有什么用？

1 个答案: