目前在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
}
},
}
答案 0 :(得分:2)
目前没有根据幻灯片数量滑动或取消滑动滑块的选项。但是你可以欺骗它选择你拥有的幻灯片数量,并根据该数量初始化滑块。
// 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
设置为定义的值,或者如果幻灯片的数量少于定义的幻灯片,则将值设置为幻灯片数量。
希望它有所帮助。