我遇到了问题,每当在响应模式下加载页面时,它都会加载不在断点中的原始设置。当我删除
slidesToShow: 3,
slidesToScroll: 1,
并使用这些设置添加断点 3000,它也会发生,它会加载第一个选项,直到我调整窗口大小。为什么会发生这种情况。
这是一个视频示例:https://www.youtube.com/watch?v=4shWJhz6r-k,当我加载页面时显示 3 张幻灯片,我需要调整窗口大小以解决此问题。
看起来 slick 不知道移动断点。
这是我的设置
function slickSettings() {
return {
infinite: true,
arrows: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true,
prevArrow: '<img src="../assets/prev.svg">',
nextArrow: '<img src="../assets/next.svg">',
responsive: [
{
breakpoint: 1115,
settings: {
slidesToShow: 3,
centerMode: false,
arrows: false,
slidesToScroll: 2,
}
},
{
breakpoint: 990,
settings: {
slidesToShow: 2,
centerMode: false,
arrows: false,
slidesToScroll: 2,
}
},
{
breakpoint: 700,
settings: {
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
centerPadding: '20px',
arrows: false,
}
},
{
breakpoint: 650,
settings: {
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
centerPadding: '20px',
arrows: false,
}
},
{
breakpoint: 400,
settings: {
centerMode: true,
centerPadding: '15px',
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
}
},
{
breakpoint: 321,
settings: {
slidesToShow:1,
slidesToScroll: 1,
centerMode: false,
arrows: false,
}
},
]
}
};