代码运行我的“if”“else if”和“else”,如果我保持原样,在函数之外,问题是它应该随着我改变浏览器的宽度而更新,以便我的网站完全响应,但它只在我刷新页面时更新。
当我把它放在一个函数中并基本上使用与其他受浏览器宽度影响的逻辑相同的逻辑时,它就不起作用了。
我是初学者,我不知道我是否展示了足够的代码,但这里是:
function setVertical() {
if ($(window).width() > 1024) {
$('.multiple-items').slick({
infinite: true,
vertical: true,
slidesToShow: 3,
slidesToScroll: 3,
verticalSwiping: true,
prevArrow: $('.top-arrow'),
nextArrow: $('.bottom-arrow')
});
} else if ($(window).width() > 800) {
$('#top-button').removeClass('fa-arrow-up');
$('#bottom-button').removeClass('fa-arrow-down');
$('#top-button').addClass('fa-arrow-left');
$('#bottom-button').addClass('fa-arrow-right');
$('.multiple-items').slick({
infinite: true,
vertical: false,
slidesToShow: 4,
slidesToScroll: 4,
verticalSwiping: false,
prevArrow: $('.top-arrow'),
nextArrow: $('.bottom-arrow')
});
} else {
$('#top-button').removeClass('fa-arrow-up');
$('#bottom-button').removeClass('fa-arrow-down');
$('#top-button').addClass('fa-arrow-left');
$('#bottom-button').addClass('fa-arrow-right');
$('.multiple-items').slick({
infinite: true,
vertical: false,
slidesToShow: 2,
slidesToScroll: 2,
verticalSwiping: false,
prevArrow: $('.top-arrow'),
nextArrow: $('.bottom-arrow')
});
}
} …Run Code Online (Sandbox Code Playgroud)