圆滑的轮播响应断点

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 没有轮播的块。

任何帮助，将不胜感激。

原文由 void 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Peter Wong 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<section class="regular slider" style="direction:ltr">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=10">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=11">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=12">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=13">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=14">
    </div>
</section>

/////脚本/////

     $(document).on('ready', function() {

      $(".regular").slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 6,
        autoplay: true,
        autoplaySpeed: 2000,

          pauseOnHover: true,

        responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 5,
                slidesToScroll: 5,
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }

  ]

      });
    });

原文由 mirazimi 发布，翻译遵循 CC BY-SA 4.0 许可协议