提问者:小点点

光滑轮播响应断点


这是我用来在我的网页上创建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块。

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


共2个答案

匿名用户

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

匿名用户

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

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

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