Javascript 如何根据我的windows大小(桌面、平板电脑、手机)设置slick.js设置?
我有很多自定义的HTML div。我将其中的3个存储在一个带有课堂幻灯片的分区中。然后,我使用该幻灯片类调用slick函数并应用如下设置:Javascript 如何根据我的windows大小(桌面、平板电脑、手机)设置slick.js设置?,javascript,jquery,css,responsive-design,slick.js,Javascript,Jquery,Css,Responsive Design,Slick.js,我有很多自定义的HTML div。我将其中的3个存储在一个带有课堂幻灯片的分区中。然后,我使用该幻灯片类调用slick函数并应用如下设置: $('.slide').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: true, }); 对于那些不知道的人,这里是 此时,我的整个UI如下所示: $('.slide').slick({ slidesToShow: 3, slidesToScroll:
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
对于那些不知道的人,这里是
此时,我的整个UI如下所示:
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
它们在全屏显示时看起来很好,但一旦我减小窗口大小,它们看起来就很差。我正在考虑根据我的窗口大小设置我的平滑设置。比如说,
If window size = full OR 1080px {
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
}
else if window size = medium or 720px {
$('.slide').slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
});
}else{
// This is for the phone
$('.slide').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
}
实现这样的目标最有效的方法是什么
这是我的。根据,这很容易
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});