光滑轮播响应断点

Question

这是我用来在我的网页上创建slick carousel的配置。

$('#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"
                            }

                          ]
            });

除了一件事，当我调整我的浏览器窗口的大小，从1920宽到800宽时，旋转播放器就会消失，内容就像普通的div一样显示，但是当我增加浏览器窗口的宽度时，旋转播放器就不会重新创建。它仍然像没有carousel的HTML div块。

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

Answer 1

这是unslick在断点处杀死旋转木马后重建旋转木马的一种方法：

$(window).resize(function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

$(window).on('orientationchange', function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

Answer 2

unslick是一个析构函数方法。一旦取消slick,就需要再次调用slick（）来构造carousel。