Javascript 滑动滑块(不滑动)响应
目前正在WordPress网站上使用Slick Slider 我有一个滑块,最大3列,全屏-1024px加。在小于1024px的屏幕上,滑块显示2列,在移动设备上,滑块显示1列 我已经建立了这个滑块动态-因此他们的可能性,将有周期,不是所有的列将被填充。i、 e.在屏幕1024px plus上,用户可能只上传了两张幻灯片的资源,而不是三张等 我遇到的问题是试图使我的滑块流畅,例如,如果用户只上传1或2张幻灯片-在滑块内,这些幻灯片不会填满整个屏幕。我已尝试对第一个对象使用“取消单击”我的设置。除非文件中缺少我,否则我找不到任何合适的 以下是我的代码片段: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张幻灯片-在滑块内,这些幻灯片不会填满整个屏幕。我已尝试对第一个对象使用“取消单击”我的设置。除
$(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
设置为定义的值,或者如果幻灯片数量小于定义的幻灯片数量,则将值设置为幻灯片数量
希望能有帮助