javascript – slickslider(unslick)响应

目前在WordPress网站上使用Slick Slider.

我有一个最大3列的滑块,全屏 – 1024px plus.在1024px以下的屏幕尺寸上,滑块显示2列,在移动设备上,滑块显示1列.

我已经构建了这个滑块动态 – 因此它们的可能性,将有句点,而不是所有列都将被填充.即,在1024px以上的屏幕上,用户可能仅在滑块内的两个幻灯片上载了资产,而不是三个等.

我遇到的问题是试图使我的滑块流畅,例如,如果用户只上传1或2张幻灯片 – 在滑块内,这些幻灯片不会填满整个屏幕.我尝试使用’unslick’我的设置作为第一个对象.除非我从文档中遗漏,否则找不到合适的内容

这是我的代码片段：

$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: 3,
slidesToScroll: 3,
speed: 800,
responsive: [
    {
        breakpoint: 1024,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
        }
    },
    {
        breakpoint: 980,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            prevArrow: false,
            nextArrow: false
        }
    },
 }

解决方法:

目前,没有选项可根据幻灯片的数量滑动或取消滑动滑块.但是你可以欺骗它选择你拥有的幻灯片数量,并根据该数量初始化滑块.

// your Slick element
var slider = $('.your-selector');

// slides amount
// it will take the maximum number of slides or 1 in case the slider is empty
var slides = Math.max(1, slider.children('.your-slide-selector').length);

// slick initialization
// for each slidesToShow and slidesToScroll use Math.min so it will take the minimim amount between the slides amount and the defined slides for the breakpoint
$(slider).slick({
    autoplay: true,
    autoplaySpeed: 800,
    slidesToShow: Math.min(3, slides),
    slidesToScroll: Math.min(3, slides),
    speed: 800,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: Math.min(3, slides),
                slidesToScroll: Math.min(3, slides),
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 980,
            settings: {
                slidesToShow: Math.min(2, slides),
                slidesToScroll: Math.min(2, slides),
                prevArrow: false,
                nextArrow: false
            }
        }
    ]
});

我没有测试滑块本身的响应性.该脚本只是将slidesToShow和slidesToScroll设置为定义的值,或者如果幻灯片的数量少于定义的幻灯片,则将值设置为幻灯片数量.

希望能帮助到你.