Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 滑动滑块(不滑动)响应_Javascript_Jquery_Css_Flexbox_Slick.js - Fatal编程技术网

Javascript 滑动滑块(不滑动)响应

Javascript 滑动滑块(不滑动)响应,javascript,jquery,css,flexbox,slick.js,Javascript,Jquery,Css,Flexbox,Slick.js,目前正在WordPress网站上使用Slick Slider 我有一个滑块,最大3列,全屏-1024px加。在小于1024px的屏幕上,滑块显示2列,在移动设备上,滑块显示1列 我已经建立了这个滑块动态-因此他们的可能性,将有周期,不是所有的列将被填充。i、 e.在屏幕1024px plus上,用户可能只上传了两张幻灯片的资源,而不是三张等 我遇到的问题是试图使我的滑块流畅,例如,如果用户只上传1或2张幻灯片-在滑块内,这些幻灯片不会填满整个屏幕。我已尝试对第一个对象使用“取消单击”我的设置。除

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

我有一个滑块,最大3列,全屏-1024px加。在小于1024px的屏幕上,滑块显示2列,在移动设备上,滑块显示1列

我已经建立了这个滑块动态-因此他们的可能性,将有周期,不是所有的列将被填充。i、 e.在屏幕1024px plus上,用户可能只上传了两张幻灯片的资源,而不是三张等

我遇到的问题是试图使我的滑块流畅,例如,如果用户只上传1或2张幻灯片-在滑块内,这些幻灯片不会填满整个屏幕。我已尝试对第一个对象使用“取消单击”我的设置。除非文件中缺少我,否则我找不到任何合适的

以下是我的代码片段:

$(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
设置为定义的值,或者如果幻灯片数量小于定义的幻灯片数量,则将值设置为幻灯片数量

希望能有帮助