javascript - 圆滑的轮播响应断点

Question

这是我用来在我的网页上创建一个漂亮的轮播的配置:

$('#carousel').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 1008,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 800,
      settings: 'unslick',
    },
  ],
})

除一件事外，它按照预期的方式工作...当我将浏览器窗口的大小从 width: 1920 调整为 800 时，轮播不流畅它，并且内容像普通 div 一样显示。

但是当我增加浏览器窗口的 width 时，轮播不会重新创建它。它仍然像没有轮播的 HTML div block 。

如有任何帮助，我们将不胜感激。

Answer 1

unslick 是一个析构方法。 unslick 后，需要再次调用 slick() 来构建 carousel。